gpt4 book ai didi

html - 图像的最大宽度属性

转载 作者:太空宇宙 更新时间:2023-11-04 11:21:17 25 4
gpt4 key购买 nike

max-width 图像之外的容器大小存在问题,图像本身未达到 60% 的比例。由于没有动态父级,我无法显示图像缩放问题。从 #container 中删除宽度/高度以查看问题。 (请注意我是在移动设备上查看的)

#container {
width: 320px;
height: 480px;
background: white;
border: 1px solid blue;
}

#img-container {
position: relative;
}

#img-container img {
position: absolute;
max-height: 60%;
}

#leftover {
background: yellow;
width: 100%;
height: 100%;
color: white;
}
<html>

<head>
<title>Stackoverflow example</title>

<body>
<div id="container">
<div id="img-container">
<img src="http://placehold.it/1024x1024.png" width="100%">
</div>

<div id="leftover">
<h1>Should only have 40% leftover after the img-container takes up 60%.</h1>
</div>
</div>

</body>
</head>

</html>

最佳答案

使用 id="img-container" 而不是 class="img-container"

检查你的 CSS。

#img-container = id="img-container"

.img-container = class="img-container"

<div id="img-container">
<image src="http://placehold.it/1024x1024.png" width="100%">
</div>

关于html - 图像的最大宽度属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32751857/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com