图片自适应浏览器大小

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

接下来让我们看下这个 class 包含了哪些 css 属性。

在下面的代码中，可以看到img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。

设置 height:auto，相关元素的高度取决于浏览器。

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

css背景图与html插入img的区别
css中的图片以背景图形式存在，写在html中的图片以标签形式存在。而在网页加载过程中，以css背景存在的图片会等到html结构加载完成才开始加载，而html中的img标签是网页结构（内容）的一部分会在加载结构的过程中加载。

附：在一个单纯由Html和Css组成的页面中，背景图片总是最后加载的，那么假若我们想要使用较小的背景图片作为占位符，用于在加载较大的图片或者Flash文件时给用户以提示，大部分时候恐怕是达不到效果的，因为背景图片有时甚至会在大图片或Flash文件加载完成之后才会被加载。

通常非内容的图片（即用来修饰页面的元素）就写在css里，如果是内容性的图片就写在html中。比如，你要做一个漂亮相框的相册，那么修饰边框的图片就写在css里，相框里的内容照片就写在html中。

图片作为背景，在图片没有加载或者加载失败时，不会有个图片的占位标记，不会出现红叉。

<!-- 背景图片按比例缩放 -->
<style type="text/css">
        body{      
        background-image: url(${pageContext.request.contextPath}/resources/images/home.jpg);      
        background-size:cover;    
     } 
</style>

img背景图

<!-- 图片自适应浏览器大小，无白边，无滚动条 -->
<body>
    <div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;">
        <img src="${pageContext.request.contextPath}/resources/images/home_bg.jpg" usemap="#planetmap" height="100%" width="100%">
    </div>
    <map name="planetmap" id="CribMap">
        <area shape="rect" coords="1427,550,1600,840" alt="screen" href="frame/sjzc.jsp">
    </map>
</body>

${pageContext.request.contextPath} : JSP中获取项目根目录（绝对路径）

如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示

<html>
<head>
<title>让图片自动适应DIV容器大小</title>
<style>
.ShaShiDi{
width:500px;
height:400px;
display:flex;
align-items:center;
justify-content:center;
			/*为了效果明显，可以将如下边框打开，看一下效果*/
			/* border:1px solid black; */
}

.ShaShiDi img{
	width:100%;
	height:auto;
}

</style>
</head>
<body>
	<div class="ShaShiDi">
		<img src="./1.png"/>
	</div>
	<div class="ShaShiDi">
		<img src="./2.png"/>
	</div>
</body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END