Question

div的宽度和高度应该是固定的

固定div内的图像应该是响应性的，不应超过容器高度。

Answer 1

只需将max-width: 100%; max-height: 100%;添加到图片即可。图像应该适合固定大小的容器div：

<!DOCTYPE html>
<html lang="de" style="height: 100%">
<head>
	<meta charset="utf-8" />
	<title>Testcase</title>
</head>
<body style="height: 100%">

	<div style="border: 1px solid red; margin: auto auto; width: 90%; height: 90%; overflow: hidden;">
		<img style="display: block; max-width: 100%; max-height: 100%; " src="http://via.placeholder.com/500x500" alt="">
	</div>
</body>
</html>

重要的是，在image-tag中，不指定width和height属性。

使用Query修复容器宽度和高度并使图像响应容器

1 个答案: