html – 如何在不拉伸的情况下调整图像大小？

发布时间：2020-12-14 23:51:07 所属栏目：资源来源：网络整理

导读：我想要一个 img其宽度为页面的40％,并且会被拉伸. 如何在不拉伸的情况下调整大小？例如,如果我有一个图像的文件原来如下所示： ____8888____________8888____________8888________ 在我的网页中,通常看起来应该是这样的： ____8888____________8888________

我想要一个< 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>

希望这可以帮助…

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!