我想要一个< img>其宽度为页面的40％,并且会被拉伸.
如何在不拉伸的情况下调整大小？
例如,如果我有一个图像的文件原来如下所示：
____8888________ ____8888________ ____8888________
在我的网页中,通常看起来应该是这样的：
____8888________ ____8888________ ____8888________
只要我将浏览器缩小一点,最大宽度(在本例中为10个字符)就会生效.
当发生这种情况时,我希望它是：
____8888__ ____8888__ ____8888__
(就像它从右侧切割而来.当然从双方都更好),
而不是：
__888_____ __888_____ __888_____
>任何技巧(将它放入< div>的背景)都没关系.
>宽度和高度未知.
>谢谢大家以前的答案,但是,对不起,我认为我没有过多强调“将其宽度限制在页面的40％之后”,这意味着在宽度限制之前它看起来应该是正常的.
解决方法
诀窍是将图像放入包含块元素,例如DIV.一旦将图像的宽度设置为100％,这将指示浏览器使图像宽度与DIV的左右边缘齐平.
然后,您通过CSS控制DIV的宽度,我发现将图像保留在块元素中可以在创建流体布局时更轻松地进行操作.
例：
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>
希望这可以帮助…
