使用 css 调整图像大小答案

【问题标题】：resize image using css使用 css 调整图像大小
【发布时间】：2014-09-02 21:24:50
【问题描述】：

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

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

我创建了一个小提琴作为演示，以便您可以看到发生了什么。

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

【问题讨论】：

标签： html css

【解决方案1】：

您可以通过将 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;}

【讨论】：

【解决方案2】：

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

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

希望这会有所帮助。

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：

首先...总是在答案中包含一些解释，而不是纯代码...其次，他必须使用%。问题指出width should be 100% throughout the browser
不要只发布代码作为答案，上面有 2 个字