CSS Image Scaling to Fit Within Area Not Distort

CSS Image size, how to fill, but not stretch?

You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

Resize image without distorting it

This is the only sane approach I can think of (using background-size: cover). You can probably do something tricky with the existing markup but I don't feel like it'll leave you with anything flexible enough.

.frame {  height: 250px;  background: transparent no-repeat center;  background-size: cover;}

<div class="frame" style="background-image: url('http://i.imgur.com/lNB7QSt.jpg')"></div>

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

How to resize the image without stretching and distorting it

You can use the object-fit property to display the image correctly regardless of the aspect ratio of the containing box or image. This way you can have uniform sized boxes with any image inside.

.pt-cv-wrapper img {
    object-fit: cover;
}

Here is a polyfill for IE and Edge.

CSS image resize distortion

Here is your solution:

#gallery {}
#gallery .section {}
#gallery .section img {  display: block;  max-width: 100%;  height: auto;  min-height: 400px;  max-height: 800px;}

<div id="gallery">  <div class="section">    <img src="http://www.digitaltrends.com/wp-content/uploads/2013/04/Samsung-Galaxy-6-3-sample-image-3.jpg" alt="Sample Image">  </div></div>

CSS scale down image to fit in containing div, without specifing original size

You can use a background image to accomplish this;

From MDN - Background Size: Contain:

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

Demo

CSS:

#im {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("path/to/img");
    background-repeat: no-repeat;
    background-size: contain;
}

HTML:

<div id="wrapper">
    <div id="im">
    </div>
</div>

Image css max width without distort

height: auto; instead of height: 537px on the actual image.

If you don't want it to grow quite so large, you can set height on the div and set `overflow: hidden;'

---

Related Topics