Question

我在一个div中有两个图像。我希望这两个图像填充整个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>

Answer 1

您应该为图像定义width和height，object-fit属性会尝试在其标签大小内缩放图像，并且如果没有适当调整此属性的大小，将无法正常工作

请参阅：MDN

Answer 2

检查此类型CSS脚本一次，然后您为图像定义height和width以适合网页中的图像

.image1 {
    /* The image used */
    background-image: url("Image_Template_1.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.image2 {
    /* The image used */
    background-image: url("Image_Template_2.jpg");

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

您将在div标签内定义body类

<body>
<div class="image1"></div>
<div class="image2"></div>
<body>

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

2 个答案: