响应式图片 responsive image

版权声明:若想转载,请在显眼的地方附上文章来源。 https://blog.csdn.net/Abudula__/article/details/81939938

下面是图片居中技术。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			img{
				border: 1px solid #DDDDDD;
				border-radius: 4px;
				padding: 5px;				
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" alt="paris" style="width: 250px;" />
	</body>
</html>

首先这个会显示出来图片,效果如下:

但它不是响应式的, 为了响应式需要多加两行代码。

 max-width: 100%;
    height: auto;

也就是把它的跨密度设置为100%且高度为auto。

猜你喜欢

转载自blog.csdn.net/Abudula__/article/details/81939938