CSS 强制调整图像大小并保持纵横比 [英] CSS force image resize and keep aspect ratio

问题描述

我正在处理图像，但遇到了纵横比问题.

I am working with images, and I ran into a problem with aspect ratios.

<img src="big_image.jpg" width="900" height="600" alt="" />

如您所见，height 和 width 已经指定.我为图像添加了 CSS 规则:

As you can see, height and width are already specified. I added a CSS rule for images:

img {
  max-width: 500px;
}

但是对于big_image.jpg，我收到width=500 和height=600.如何设置要重新调整大小的图像，同时保持其纵横比.

But for big_image.jpg, I receive width=500 and height=600. How do I set images to be re-sized, whilst keeping their aspect ratios.

推荐答案

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

如果图像对于指定区域太大，这将使图像缩小(作为缺点，它不会放大图像).

This will make image shrink if it's too big for specified area (as downside, it will not enlarge image).

这篇关于CSS 强制调整图像大小并保持纵横比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！