CSS力图像调整大小并保持宽高比 [英] CSS force image resize and keep aspect ratio

问题描述

我正在使用图片，而且遇到了长宽比问题。

 < img src =big_image .jpgwidth =900height =600alt =/> 
  

可以看到， height code> width 。我为图片添加了CSS规则：

  img {
 max-width：500px; 
} 
  

但 big_image.jpg ，我收到 width = 500 和 height = 600 。

解决方案

  img {显示：block; max-width：230px; max-height：95px; width：auto; height：auto;}  
 
 < p&原始为400x400像素，但应通过CSS调整大小：< / p>< img width =400height =400src =http://i.stack.imgur.com/aEEkn.png> ;  
 

如果指定区域太大， （作为下降，它不会放大图像）。

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

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

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

img {
  max-width:500px;
}

But for big_image.jpg, I receive width=500 and height=600. How I can set images to be re-sized, while 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屋！