I am working on creating a responsive webpage using Bootstrap, where I need to display a large image above a form. To manage the size of the image, I have placed it inside a "peek-view" container which allows scrolling both horizontally and vertically to view the entire image.
My CSS includes two layers of containers for the image setup, as shown below:
.outer-container-for-image {
width: 400px;
height: 300px;
overflow: auto; /* Enable scrollbars */
}
.inner-container-for-image {
position: relative;
width: 1000px;
height: 800px;
}
.inner-container-for-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
When viewing the webpage in Google Chrome on mobile and desktop, I get the following results:
https://i.sstatic.net/UC74V.png https://i.sstatic.net/6nWXt.png
In the mobile view, the image is almost centered correctly but the text field alignment is off, and the image width does not match the text field width.
In the desktop view, both the image and the text field are left-aligned, and the image width does not match the text field width either.
How can I resolve these alignment issues?
Below is a snippet of my source code:
(Your CSS code here...)
(Your HTML code here...)