模仿bootstrap写响应式图片布局

最新推荐文章于 2024-08-11 09:50:36 发布

黄宝康

最新推荐文章于 2024-08-11 09:50:36 发布

阅读量1.1k

点赞数

分类专栏： html 文章标签：响应式图片

本文链接：https://blog.csdn.net/huangbaokang/article/details/77847906

版权

html 专栏收录该内容

29 篇文章 3 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
    .img-responsive{
        display: block;
        height: auto;
        max-width: 100%;
    }
</style>
</head>
<body>
    <img src="hh.png" alt="" class="img-responsive" />
</body>
</html>

这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。
设置 height:auto，相关元素的高度取决于浏览器。
设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

缩放浏览器大小，可以看到图片的宽度高度会自动改变，而且的等比例缩放!