html代码
<html>
<title>自适应图片</title>
<head>
<link href="./css/style.css" rel="stylesheet"type="text/css" ></link>
</head>
<body>
<!--响应式图片-->
<img src="./img/bg.jpg" class="img-xys" alt="响应式图像">
</body>
</html>css代码
.img-xys {
display: inline-block;
height: auto;
max-width: 100%;
}解释一下css代码
max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。
把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。
设置 height:auto，相关元素的高度取决于浏览器。
设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
8220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
