I am in the process of creating a set of HTML pages specifically tailored for iPad Air and iPad Mini. These pages will feature several large images, with dimensions such as 1600x300. However, upon testing in Windows browsers, I encountered an issue where the images appeared too big for the screen, extending beyond its borders. The code snippet responsible is showcased below:
<div class="wrapper">
<div class="image1"></div>
<div class="image2"></div>
</div>
.wrapper {
width: 100%;
height: 100%
}
.image1 {
width: 1600px;
height: 300px;
top: 100px;
left: 100px
}
.image2 {
width: 1700px;
height: 300px;
top: 450px;
left: 100px
}
The dimensions of the div are aligned with those of the image. Since the images were specifically optimized for iPad screens, altering their size is not an option.
To ensure that the images are correctly positioned on all screens, including iPads, I have found that setting the resolution of the wrapper to match that of the iPad (2048x1536) resolves the issue when testing with a screen size of 1024x768 (the logical resolution of an iPad).
.wrapper {
width: 2048px;
height: 1536px
}
My goal is to make the images responsive across various screen sizes, including iPads, by assigning 100% width and height to the wrapper class. This way, even in portrait mode on an iPad, the images will be displayed without any distortion. Any advice on how to achieve this would be greatly appreciated.
Thank you