3

this question might seem quite odd, but here's the deal:

I met some article the other day that and saw <img> tag's css picture display properties, which allowed to change tag's width and height, without stretching the picture itself.

The final effect looked like overflow: hidden;, but without parent container.

I forgot to bookmark that article and property name. Can someone tell me the property description?

BSMP
  • 4,596
  • 8
  • 33
  • 44
naffiq
  • 1,030
  • 1
  • 9
  • 19
  • 1
    Possible duplicate of [CSS: force image width and height without stretching](http://stackoverflow.com/questions/1733006/css-force-image-width-and-height-without-stretching) – BSMP Feb 05 '17 at 06:03

2 Answers2

6

I guess you are looking for object-fit CSS property.

img {
    width: 100px;
    height: 200px;
  }
img.noStretch{
    object-fit: cover;
  }
<img src="http://lorempixel.com/200/200"/>

<img class="noStretch" src="http://lorempixel.com/200/200"/>
Kaiido
  • 123,334
  • 13
  • 219
  • 285
1

You may need a wrapper, or use background style instead.

For my sugesstion:

#img {
  display: inline-block;
  width: 160px;
  height: 120px;
  background: 50% 50% no-repeat;
  background-size: cover; /* try also: contain or 100% */
}
<div id="img" style="background-image: url(https://www.gravatar.com/avatar/0217df290e6f29cbe204479f48fb662f?d=identicon&r=PG)"></div>

I think it would be what you want.

Alfred Huang
  • 17,654
  • 32
  • 118
  • 189
  • Yes, that gives the same effect, as `object-fit` property, described above, and supported in all browser, but I was looking for one-property solution. – naffiq Feb 05 '17 at 06:11