给img标签写自适应css样式
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 属性指定的宽度。这让图片对响应式布局的支持更友好。
作者：久伴亦久别
来源链接：https://blog.csdn.net/weixin_42501296/article/details/80754578
版权声明：
1、JavaClub（https://www.javaclub.cn）以学习交流为目的，由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容，包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网，本站不享有版权，版权归原作者所有。
2、本站提供的内容仅用于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容，请及时通知本站（javaclubcn@163.com），我们将第一时间核实后及时予以删除。
