CODEWITHSUNDEEP
htmlcss
Yanick Rochon
Yanick Rochon

Reputation: 53

Prevent image distortion inside a resizing container with CSS

Given a HTML snippet 

<div class="swiper-slide">
  <div layout="row" layout-align="start stretch" flex style="height: 100%;">
    <div layout="row" layout-align="center center" flex="grow">
      <img src="/media/{{mediaId}}/h/1440">
    </div>
  </div>
</div>

and it's CSS as

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

The image does remain centered and does not grow beyond it's parent container, however it does horizontally stretch or shrink when the component is resized. Is it possible to tell that the image element should preserve the aspect ratio of the displayed image?

Upvotes: 2

Views: 2631

Answers (2)

nanobar
nanobar

Reputation: 66445

Use stretch on the max-height, it won't work in old browsers you would have to do some hacky css for those.

img {
  display: block;
  max-width: 100%;
  max-height: -webkit-fill-available;
  max-height: -moz-available;
  max-height: fill-available;
  border: 1px solid blue;
}

.container {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  padding: 5px;
  margin-bottom: 20px;
}
<div class="container"><img src="https://cdn.vox-cdn.com/thumbor/LjOG9-WQDquskHMvYG32ADEaDm4=/0x0:2040x1360/920x613/filters:focal(857x517:1183x843):format(webp)/cdn.vox-cdn.com/uploads/chorus_image/image/57358643/jbareham_170504_1691_0020.0.0.jpg" /></div>

<div class="container"><img src="https://designyoutrust.com/wp-content/uploads/2018/06/0-24.jpg" /></div>

Upvotes: 0

Gabriel C. Troia
Gabriel C. Troia

Reputation: 3340

Display the image as a background of a container block, that's stretched to your desires.

Something like this:

<div class="swiper-slide">
  <div layout="row" layout-align="start stretch" flex style="height: 100%;">
    <div layout="row" layout-align="center center" flex="grow">
      <div 
        class="img-container" 
        style="background-image: url(/media/{{mediaId}}/h/1440)"
      >
      </div>
    </div>
  </div>
</div>

CSS:

.img-container {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

This way you can ensure the image doesn't stretch only in one direction, making it look off, but instead keeps the ratio.

Upvotes: 1

Related Questions