使用css调整图像大小

Question

我正在尝试仅使用css调整图像大小。

它正在调整大小，但由于某种原因，它没有延伸到100％的浏览器。我想要的是它会调整给定高度的图像，但整个浏览器的宽度应该是100％。

我创建了一个小提琴作为演示，以便您可以看到正在发生的事情。

<div class="resize_image">
    <img src="http://www.mrwallpaper.com/wallpapers/sunset-scenery.jpg">
</div>

全屏http://jsfiddle.net/squidraj/sbnvwped/embedded/result/

演示：http://jsfiddle.net/squidraj/sbnvwped/

Answer 1

以下代码按比例调整图像的大小（或更准确地说，容器元素），但如果图像的高度大于485px，则宽度将与此成比例。要剪切图像，请在宽度和高度正确的位置放置另一个div，并将overflow设置为hidden，然后从图像本身中删除max-height。

.resize_image img {
    display: block;
    height: auto;
    max-height: 485px;
    max-width: 1440px;
    width: 100%;
}

希望这有帮助。

Answer 2

您可以通过将img标记设置为100％宽度和高度并将其放入容器div并调整其大小来调整大小。 Demo

<div id="resize">
<img src="http://coolvectors.com/images/vect/2009/07/500x500.jpg" width="100%" height="100%"></div>

---

#resize{
  width:250px;
  height:250px;
}
#resize:hover {
width:500px;
height:500px;}

Answer 3

试试这个：

img.resize{
    width:540px; /* you can use % */
    height: auto;
}