How to make large size(large resolution) images fit to every screen size,How to avoid it going beyond the screen

Question

I'm making a few HTML pages specifically for iPad Air and iPad Mini. The pages will have few larges images, for example of the size of 1600x300. But as per the code which was written by me the images are too big to be on the screen, it goes beyond the screen while testing in Windows browsers. Code as shown 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 width and height of div are set the same as width and height of the image. The images size were specifically designed for iPad, I can't change the size.

If I give the actual resolution of iPad for .wrapper as shown below the images will get positioned correctly when I test I the browser setting the screen size to 1024x768 (logical resolution of iPad).

.wrapper {
    width: 2048px;
    height: 1536px
}

I want the image to adapt to all screen as well as iPad by giving 100% width and height to wrapper class so that even in the portrait mode of iPad I can view it without any fluctuations. Please tell me how to achieve this.

Thanks

Is there a reason you're using DIVs instead of <img> tags? — hungerstar
No,there will be no contents laid over any image.I have 2 images one below each other and a text after them of around 8 word with a font size of 60.I was told to put any content with in a div tag.Is there any particular reason for it?? — Nikhil Bharadwaj
Based on your response I would go with <img> tags then, see my answer below. It might be a bit of semantics but to me placing images in a <div> (<div><img></div>) is not the same as setting an image as the background of a <div>. A lot of times your content will be placed inside a <div>, but it they can be placed inside almost any tag. — hungerstar
Thank flr the response.I have few more question,what if want to place large images,say sizes of 400x400 of around 10 images one beside each other and make them to adapt to every screen size? What should be the warpper width and height?? Because I want the background to be black.It would be good if u can show the html and css part. — Nikhil Bharadwaj
I'm not sure what the layout you're suggesting would look like. — hungerstar

hungerstar hungerstar · Accepted Answer · 2015-05-01T06:49:48

OP hasn't clarified why they're using DIVs. Maybe there's going to be content laid over it? Until OP provides clarification I'm going to provide the standard responsive image solution.

If you don't have to use DIVs, try this:

<img src="http://placehold.it/1600x300">
<img src="http://placehold.it/1600x300">

img {
    display: block;
    max-width: 100%;
}

jsFiddle: http://jsfiddle.net/rwzn2db6/

UPDATE

Note: I cannot tell if you're also looking for a 100% height option or just need the widths to be a 100% width and scale.

If you'd like to use DIVs you could use background-size: cover along with the appropriate amount of padding-bottom for each image DIV. The padding on the bottom of the DIV is based on the image's height to width ratio expressed as a percentage.

<div class="container">
    <div class="img-1"></div>
    <div class="img-2"></div>
</div>

.container > div {
    background-size: contain;
}
.img-1 {
    background: url('http://placehold.it/1600x300/') no-repeat;
    padding-bottom: 18.75%; /* 300/1600 * 100 = 18.75 */ 
}
.img-2 {
    background: url('http://placehold.it/1600x300') no-repeat;
    padding-bottom: 25%; /* 400/1600 * 100 = 25 */
}

jsFiddle: http://jsfiddle.net/5kjtdhmn/

Either of the solutions offered above may not be a 100% what you're looking for as it is hard to tell what the proper context and final objective is.

How to make large size(large resolution) images fit to every screen size,How to avoid it going beyond the screen

4 Answers