CODEWITHSUNDEEP
htmlimagecssviewport
user2707590
user2707590

Reputation: 1126

Center image in any viewport without stretching

I have 3 different box sizes in which I need to display an image. The image should take the entire width and height of the box but should not stretch. It can crop and center the image.

Here is an example: https://jsfiddle.net/y1zn0mxy/

If you see the 3 different size, you will see that it works in the first and second case but not in the last one. It would work in the last one if i swap the size of the image tag to:

width: 100%;
height: auto;

but then it will not work in the first two.

Any other way to achieve this?

Upvotes: 2

Views: 4097

Answers (4)

vals
vals

Reputation: 64164

Besides Andreas good answer, you have a new way to handle this.

Just can achieve just the same functionatily of backgroound-size: cover in an image using object-fit.

It isn't as widely suported (no suport in IE/Edge) but there is a polyfill available

img {
    position: absolute;
    top: -100%;
    right: -100%;
    bottom: -100%;
    left: -100%;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box {
  position: relative;
  overflow: hidden;
}
<div style="width:300px; height:250px; margin: 30px; background: black; float: left;">    
    <div class="img box" style="padding:0; width: inherit; height: inherit;">
        <img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
    </div>
</div>

<div style="width:300px; height:500px; margin: 30px; background: black; float: left;">    
    <div class="img box" style="padding:0; width: inherit; height: inherit;">
        <img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
    </div>
</div>

<div style="width:500px; height:200px; margin: 30px; background: black; float: left;">    
    <div class="img box" style="padding:0; width: inherit; height: inherit;">
        <img src="http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg" class="landscape" />
    </div>
</div>

Upvotes: 1

andreas
andreas

Reputation: 16936

You can simply achieve the desired effect by inserting your image as background image instead of an <img /> tag. The advantage is, you don't need the image tags and the CSS applied to them. Just use background-size: cover; to always fit the image into the viewport. This way you have much less code and can control the image by the CSS background property.

.img {
  background-image: url(http://i.kinja-img.com/gawker-media/image/upload/jour87ix9aoikm1zpjct.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
<div style="width:300px; height:250px; margin: 30px; background: black; float: left;">
  <div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>

<div style="width:300px; height:500px; margin: 30px; background: black; float: left;">
  <div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>

<div style="width:500px; height:200px; margin: 30px; background: black; float: left;">
  <div class="img box" style="padding:0; width: inherit; height: inherit;"></div>
</div>

Upvotes: 6

Kuba
Kuba

Reputation: 1455

It's normal behaviour. It's normal behaviour. You can't set both axis to 100% because your image will be stretched. Why not add additional class for horizontal landscape: https://jsfiddle.net/y1zn0mxy/1/ ?

If you don't need <img ... /> you can replace it by css properties:

  • background
  • background-position
  • background-size: cover

Here you can see reproduce: https://jsfiddle.net/y1zn0mxy/3/

Upvotes: 1

Varin
Varin

Reputation: 2443

Create a new class for the last image (I called it landscape2 in my jsfiddle) as the last image is the only one with width value higher than the height value. Then add this:

.landscape2 {
  width:100%;
}

https://jsfiddle.net/y1zn0mxy/2/

Upvotes: 1

Related Questions