在编写页面过程中,容器大小会被固定,但图片大小可能会出现不一致,使用以下样式可以让图片100%自适应容器,看来页面统一、整齐、美观!
html:
<div>
<img src=image1.jpg" alt="img">
</div>
css:
<style>
div{
//尺寸根据需求设定
width: 150px;
height: 150px;
}
img{
width:auto;
height:auto;
max-width: 100%;
max-height:100%;
}
</style>
html:
<div>
<img src=image1.jpg" alt="img">
</div>
css:
<style>
div{
//尺寸根据需求设定
width: 150px;
height: 150px;
}
img{
width:auto;
height:auto;
max-width: 100%;
max-height:100%;
}
</style>