一、浏览器图片缩放默认表现行为行为
在想出解决方案之前,首先要弄清楚浏览器对于图片尺寸是怎么处理的,稍安勿躁,一步一步来分析下。
一个图片可以改变成任意尺寸,容器是80%:
<div>
<img src="https://dummyimage.com/600x400/000/fff" alt="Norway">
</div>
不加任何属性:
img {}
div{
width:80%;
background-color:pink;
text-align: center;
}
图片默认是不会缩放的,宽高是图片原尺寸,图片宽高高于容器时会溢出。
width:100%
img {
width:100%;
}
div{
width:80%;
background-color:pink;
text-align: center;
}
图片宽度随容器宽度缩放,图片宽高比不变,图片高度高于容器时会溢出。
max-width:100%
tips: max-height:100%效果是一样的
img {
max-width:100%;
}
div{
width:80%;
background-color:pink;
text-align: center;
}
图片图片宽度随容器宽度缩放,图片宽高比不变,图片高度高于容器时会溢出,
但缩放不会超过原图宽高。
二、解决方案
1、图片容器宽度百分比,高度自适应;图片等比例自适应
还是上面那个例子,图片任意尺寸,容器是80%:
<div>
<img src="https://dummyimage.com/600x400/000/fff" alt="Norway">
</div>
容器高度无限制时
img {
max-width: 100%;
/* max-height: 400px; */
}
div{
width:80%;
/* min-height: 300px; */
background-color:pink;
text-align: center;
}
容器设置最大高度
img {
max-width: 100%;
max-height: 400px;
}
div{
width:80%;
/* min-height: 300px; */
background-color:pink;
text-align: center;
}
容器设置最小高度
tips:此时若图片小于最小高度,图片垂直居中(采用flex布局)
img {
max-width: 100%;
/* max-height: 400px; */
}
div{
width:80%;
min-height: 300px;
background-color:pink;
display: flex;
justify-content: center;
align-items: center;
}
容器设置最大最小高度
img {
max-width: 100%;
max-height: 400px;
}
div{
width:80%;
min-height: 300px;
background-color:pink;
display: flex;
justify-content: center;
align-items: center;
}
2、图片容器宽高百分比;图片等比例自适应
<html>
<head></head>
<body>
<div class='wrapper'>
<div class='image'></div>
</div>
</body>
</html>
html,body{
height: 100%;
}
.wrapper{
width:80%;
height:80%;
background-color: pink;
}
.image{
width: 100%;
height: 100%;
background-image: url('https://dummyimage.com/600x400/000/fff');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-color: #aaa;
}
3、图片容器宽高百分比;图片居中覆盖不缩放(显示不完整但不失真)
<html>
<head></head>
<body>
<div class='wrapper'>
<div class='image'></div>
</div>
</body>
</html>
html,body{
height: 100%;
}
.wrapper{
width:80%;
height:80%;
background-color: pink;
}
.image{
width: 100%;
height: 100%;
background-image: url('https://dummyimage.com/600x400/000/fff');
background-size: cover;
background-position: center center;
}
4、使用picture元素或媒体查询,不同场景加载不同图片
如果<picture>
元素与当前的<audio>
和<video>
元素协同合作将大大增强响应式图像的工作进程。它允许你放置多个source标签,以指定不同的图像文件名,进而根据不同的条件进行加载。
具体看:picturefill
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。