html - 如何在不拉伸(stretch)的情况下调整图像大小？

Question

我想要一个 <img>其宽度为页面的 40%，并被拉伸(stretch)。

如何在不拉伸(stretch)的情况下调整它的大小？

例如，如果我有一张图片，其文件最初看起来是这样的:

____8888________
____8888________
____8888________

在我的网页中，通常情况下，它应该是这样的:

____8888________
____8888________
____8888________

一旦我将浏览器缩小一点，max-width (假设本例中为 10 个字符)将生效。
当发生这种情况时，我希望它是:

____8888__
____8888__
____8888__

(就像是从右边切开一样，当然两边切开更好)
而不是:

__888_____
__888_____
__888_____

• 任何技巧(将其放入 <div> 的背景中)都可以。
• 宽度和高度未知。
• 谢谢大家之前的回答，但是，抱歉，我认为我没有足够强调“之后将其宽度限制为页面的 40%”，这意味着在宽度之前-限制它应该看起来很正常。

Answer 1

诀窍是将图像放入包含 block 的元素中，例如 DIV。一旦进入内部，将图像的宽度设置为 100%，这将指示浏览器使图像宽度与 DIV 的左右边缘齐平。

然后您可以通过 CSS 控制 DIV 的宽度，我发现将图像保留在 block 元素中可以使创建流畅布局时的操作更加容易。

例子:

img.stretchy {
width: 100%; /*Tells image to fit to width of parent container*/
}
.container {
width: 33%; /*Use this to control width of the parent container, hence the image*/
}

<div class="container">
   <img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="stretchy" />
</div>

如果您希望以任何方式裁剪/裁剪图像，请将其设置为大于其父级，并将父级的溢出 css 设置为隐藏。

例子:

img.clipped {
    width: 150%; /*Scales image to 150% width of parent container*/
    float: left; /*Floats image to left of container - clipping right hand side*/
    float: right; /*Floats image to right of container - clipping left hand side*/
}
.container {
    width: 33%; /*Use this to control width of the parent container, hence the image*/
    overflow: hidden;
}

<div class="container">
   <img src="http://i.stack.imgur.com/fv6Ib.jpg" alt="Beach Scene" class="clipped" />
</div>

希望这有助于...