html - 为什么对象适合不影响图像？

标签 html css image

我在一个 div 中有两个图像。我希望这两个图像填充整个 div，它应该是网页的整个高度和宽度。唯一的问题是，当我使用 object-fit 属性时，图像根本不包含在我的容器中。就好像我根本没有包含该属性一样。有什么办法可以帮助我解决这个问题吗？谢谢。

@charset "utf-8";
/* CSS Document */

body {
	margin: 0;	
}

.container {
	margin: 0;
	display: block;
	max-height: 100vh;
}

.image1 {
	object-fit: contain;
	z-index: 1;
	
	position: relative;
	top: 0;
	left: 0;
}

.image2 {
	object-fit: contain;
	z-index: 2;
	
	position: absolute;
	top: 0;
	left: 0;
	
}

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sylvanas</title>
	<link href="styles.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="container">
		<img class="image1" src="Image_Template_1.png">
		<img class="image2" src="Image_Template_2.png">
		
		
	</div>


	<script src="script.js">
	</script>	
</body>
</html>

最佳答案

您应该为图像定义 width 和 height，object-fit 属性会尝试在其标签大小内缩放图像，但没有适当调整大小属性不起作用

参见:MDN

关于html - 为什么对象适合不影响图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53225925/