gpt4 book ai didi

javascript - 防止图像调整 div 大小

转载 作者:行者123 更新时间:2023-12-05 06:02:47 25 4
gpt4 key购买 nike

我尝试使用 overflow: hidden, Object-fit: contain, max-height: 100%; 等 css 编辑父 div 和图像本身;最大宽度:100%;。与我的代码一起工作的是使图像成为 pic div 的背景图像并将其设置为包含。关于如何将图像放在 div 中而不使其扩展到父 div 之外,我是否遗漏了什么?根据我的理解,这与我使用 flexbox 有关,可能是错误的,名称 div 使 contain div 进一步向下延伸。

function start(){
var aa = document.getElementById("name");
var ab = document.getElementById("charname");
var ac = document.getElementById("prefs");
var ad = document.getElementById("sliders-clearfix");
var ae = document.getElementById("pref-sliders");
aa.append(ab);
ac.append(ad, ae);
}
html, body, .profile {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
display: flex;
box-sizing: border-box;
flex-flow: column;
border: 5px inset blue;
}
div {
display: flex;
}
.border{border: 5px inset blue;}
img {max-width: 100%; max-height: 100%;}
#name{width: 100%;}
#contain{height: 100%; width: 100%; flex-flow: row;}
#pic {height: 100%; width: 50%;}
#content{height: 100%; width: 50%;}
<html>
<body>
<h1 id="charname">Rage</h1>
<div class="profile">
<div id="name" class="border">
</div>
<div id="contain" class="border">
<div id="pic" class="border">
<img onload="start()" src="https://i.imgur.com/6LRFBk8.png">
</div>
<div id="content" class="border">
<div id="prefs" class="border">
</div>
</div>
</div>
</div>
<div id="sliders-clearfix" class="clearfix"></div>
<div id="pref-sliders" class="show-p-only"></div>
</body>
</html>

最佳答案

为父 div 提供 px 或 rem 或 vh 作为高度而不是百分比。就是这样。

.border { border: 5px inset blue;高度:200px !重要; }

关于javascript - 防止图像调整 div 大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66838573/

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