如果我有:
#logo {
width: 400px;
height: 200px;
}
然后<img id="logo" src="logo.jpg"/>
图片将会拉伸以填满该空间。我希望图片保持原始大小,但是在DOM中占据那么多的空间。我需要添加一个封装的 <div>
或者 <span>
吗?我不喜欢为样式而添加标记。
是的,你需要一个封装的div:
<div id="logo"><img src="logo.jpg"></div>
使用类似以下的方式:
#logo { height: 100px; width: 200px; overflow: hidden; }
其他解决方案(填充、边距)更繁琐(需要根据图像的尺寸计算正确的值),但也不能有效地使容器比图像更小。
此外,上述方法可以更轻松地适应不同的布局。例如,如果要将图像放在右下方:
#logo { position: relative; height: 100px; width: 200px; }
#logo img { position: absolute; right: 0; bottom: 0; }
将图像作为div的背景载入。
改为:
<img id='logo' src='picture.jpg'>
<div id='logo' style='background:url(picture.jpg)'></div>
url(pic) center top;
更新: 这个答案是在object-fit之前,现在你应该使用object-fit/object-position。
它仍然对旧版浏览器有用,用于额外属性(如background-repeat),以及边缘情况(例如,解决Chrome对flexbox和object-position的bug以及FF(前任?)与grid + autoheight + object-fit的问题。网格/ flexbox中的包装器div经常会产生...不直观的结果。
background-repeat:no-repeat !important; float:left; width:100px; height:100px;
- NilsCSS3 object-fit
我不确定它已经被Webkit、IE和Firefox实现到了什么程度,但Opera的效果很棒。
object-fit
可与SVG内容一起使用,但同样的效果也可以通过在SVG本身中设置preserveAspectRatio=""
属性来实现。
img {
height: 100px;
width: 100px;
-o-object-fit: contain;
}
Chris Mills在这里进行了演示:http://dev.opera.com/articles/view/css3-object-fit-object-position/
#logo {
width: 400px;
height: 200px;
/*Scale down will take the necessary specified space that is 400px x 200px without stretching the image*/
object-fit:scale-down;
}
<div class="mydiv">
<img src="location/of/your/image" ></img>
</div>
设置您的 div
尺寸并使其相对定位。
.mydiv {
position: relative;
height:300px;
width: 100%;
overflow: hidden;
}
然后为你的图片添加样式
img {
width: 100%;
height: auto;
overflow: hidden;
}
<img style="object-fit: contain" src="...">
对我来说完美地工作了。
代码示例:
.width100 {
max-width: 100px;
height: 100px;
width: auto;
border: solid red;
}
<img src="https://www.gravatar.com/avatar/dc48e9b92e4210d7a3131b3ef46eb8b1?s=512&d=identicon&r=PG" class="width100" />
.img__container {
display: flex;
padding: 15px 12px;
box-sizing: border-box;
width: 400px; height: 200px;
img {
margin: auto;
max-width: 100%;
max-height: 100%;
}
}