css如何使图片自适应?

网页前台开发中的很多时候,我们需要让图片能够根据父元素自适应变化大小,从面使得网页排版更加美观。css如何使图片自适应呢?下面我们来看一下使用css设置图片自适应的方法。

css可以通过设置图片的宽高为100%使图片自适应div大小,为图片添加width:100%,height:100%属性即可使图片自动扩大适应div大小。

示例:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:250px;
height:200px;
border:5px solid red;
}
.img1 {
 width: 100%;
height:100%;
}
</style>
</head>
<body>
<div><img src="https://ss.0133.cn/upload/article/000/000/013/5da3e4e32f6e0593.jpg-600" 
class="img1"></div>
<div><img src="https://ss.0133.cn/upload/article/000/000/013/5da3e4e32f6e0593.jpg-600" 
></div>
</body>
</html>

效果图:

1.jpg-600

以上就是css如何使图片自适应?的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS3 答疑