猿问
下载APP

CSS图像大小,如何填充,不拉伸?

CSS图像大小,如何填充,不拉伸?

我有一个图像,我想设置一个特定的宽度和高度(以像素为单位)

但如果我使用css(width:150px; height:100px)设置宽度和高度,图像将被拉伸,它可能是丑陋的。

如何使用CSS 图像填充到特定大小,而不是拉伸它?

填充和拉伸图像的示例:

原始图片:

https://img1.mukewang.com/5d5f9c5500012cfd02420363.jpg

拉伸图像:

https://img2.mukewang.com/5d5f9c570001d44401500100.jpg

填充图片:

https://img4.mukewang.com/5d5f9c590001d36a01500100.jpg

请注意,在上面的填充图像示例中:首先,将图像调整为150x255(保持纵横比),然后将其裁剪为150x100。



潇湘沐
浏览 46回答 3
3回答

临摹微笑

如果您想将图像用作CSS背景,那么就有一个优雅的解决方案。只需使用cover或contain在background-sizeCSS3属性中。<div&nbsp;class="container"></div>.container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;150px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100px; &nbsp;&nbsp;&nbsp;&nbsp;background-image:&nbsp;url("http://i.stack.imgur.com/2OrtT.jpg"); &nbsp;&nbsp;&nbsp;&nbsp;background-size:&nbsp;cover; &nbsp;&nbsp;&nbsp;&nbsp;background-repeat:&nbsp;no-repeat; &nbsp;&nbsp;&nbsp;&nbsp;background-position:&nbsp;50%&nbsp;50%; }虽然cover会给你一个放大的图像,但contain会给你一个缩小的图像。两者都将保留像素长宽比。http://jsfiddle.net/uTHqs/(使用封面)http://jsfiddle.net/HZ2FT/(使用包含)根据Thomas Fuchs的快速指南,这种方法具有对Retina显示器友好的优点。值得一提的是,浏览器对这两个属性的支持不包括IE6-8。

尚方宝剑之说

不使用CSS背景只有1个div来剪辑它调整到最小宽度比保持正确的宽高比从中心裁剪(垂直和水平,你可以调整顶部,左边和变换)如果你使用主题或其他东西要小心,他们通常会宣称img max-width为100%。你必须没有。测试出来:)https://jsfiddle.net/o63u8sh4/<p>Original:</p><img&nbsp;src="http://i.stack.imgur.com/2OrtT.jpg"&nbsp;alt="image"/><p>Wrapped:</p><div> &nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src="http://i.stack.imgur.com/2OrtT.jpg"&nbsp;alt="image"/></div>div{ &nbsp;&nbsp;width:150px;&nbsp; &nbsp;&nbsp;height:100px;&nbsp; &nbsp;&nbsp;position:relative; &nbsp;&nbsp;overflow:hidden; } div&nbsp;img{ &nbsp;&nbsp;min-width:100%; &nbsp;&nbsp;min-height:100%; &nbsp;&nbsp;height:auto; &nbsp;&nbsp;position:relative; &nbsp;&nbsp;top:50%; &nbsp;&nbsp;left:50%; &nbsp;&nbsp;transform:translateY(-50%)&nbsp;translateX(-50%); }

慕勒3428872

有三个不同之处:&nbsp;没有必要在元素上提供height和width属性,image因为它们将被样式覆盖。所以写这样的东西就足够了。<img&nbsp;class="cover"&nbsp;src="url&nbsp;to&nbsp;img&nbsp;..."&nbsp;&nbsp;/>提供width:100%风格。如果您使用bootstrap并希望图像拉伸所有可用宽度,这将非常有用。指定height属性是可选的,您可以根据需要删除/保留该属性.cover&nbsp;{ &nbsp;&nbsp;&nbsp;object-fit:&nbsp;cover; &nbsp;&nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;&nbsp;/*height:&nbsp;300px;&nbsp;&nbsp;optional,&nbsp;you&nbsp;can&nbsp;remove&nbsp;it,&nbsp;but&nbsp;in&nbsp;my&nbsp;case&nbsp;it&nbsp;was&nbsp;good&nbsp;*/}
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答