本文介绍了CSS力图像调整大小并保持宽高比的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用图片,而且遇到了长宽比问题。
< 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力图像调整大小并保持宽高比的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!