Using Just CSS, Crop .Img Keeping Aspect Without Distortion

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">

CSS Display an Image Resized and Cropped

You could use a combination of both methods eg.

    .crop {        width: 200px;        height: 150px;        overflow: hidden;    }
    .crop img {        width: 400px;        height: 300px;        margin: -75px 0 0 -100px;    }

    <div class="crop">        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">    </div>

CSS: 100% width or height while keeping aspect ratio?

If you only define one dimension on an image the image aspect ratio will always be preserved.

Is the issue that the image is bigger/taller than you prefer?

You could put it inside a DIV that is set to the maximum height/width that you want for the image, and then set overflow:hidden. That would crop anything beyond what you want.

If an image is 100% wide and height:auto and you think it's too tall, that is specifically because the aspect ratio is preserved. You'll need to crop, or to change the aspect ratio.

Please provide some more information about what you're specifically trying to accomplish and I'll try to help more!

--- EDIT BASED ON FEEDBACK ---

Are you familiar with the max-width and max-height properties? You could always set those instead. If you don't set any minimum and you set a max height and width then your image will not be distorted (aspect ratio will be preserved) and it will not be any larger than whichever dimension is longest and hits its max.

How do I fit an image (img) inside a div and keep the aspect ratio?

You will need some JavaScript to prevent cropping if you don't know the dimension of the image at the time you're writing the css.

HTML & JavaScript

<div id="container">
    <img src="something.jpg" alt="Sample Image" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

If you use a JavaScript Library you might want to take advantage of it.

Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?

img {max-width:100%;} is one way of doing this. Just add it to your CSS code.

http://jsfiddle.net/89dtxt6s/

CSS Circular Cropping of Rectangle Image

The approach is wrong, you need to apply the border-radius to the container div instead of the actual image.

This would work:

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

img {
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

<div class="image-cropper">
  <img src="https://via.placeholder.com/150" class="rounded" />
</div>

Why does image keep replicating when being width set to 100% and how to fix this?

The dimension and position properties of the container are not related to background image. Try the following instead:

background-position: center;
background-repeat: no-repeat;

Also, if you want the background-image to fill the entire area, you can use
background-size: cover; which will crop and fill the container maintaining the aspect ratio, or background-size: contain; which will squeeze the entire image in the container, distorting the aspect ratio.

---

Related Topics