防止图像调整 div 的大小
[英]Prevent Image from resizing div
问题描述
I have tried to edit the parent divs and the image itself using css such as overflow: hidden, Object-fit: contain, max-height: 100%;
我尝试使用 css 编辑父 div 和图像本身，例如溢出：隐藏，对象拟合：包含，最大高度：100%； max-width: 100%;.最大宽度：100%；。 What does work with my code is making the image a background image for the pic div and setting it to contain.对我的代码起作用的是使图像成为 pic div 的背景图像并将其设置为包含。 Is there something I am missing on how to have the image inside the div without making it expand past the parent div?关于如何将图像放在 div 内而不使其扩展到父 div 之外，我是否缺少一些东西？ From my understanding it has to do with me using flexbox, probably wrong, with the name div making the contain div extend further down.据我了解，这与我使用 flexbox 有关，可能是错误的，名称 div 使包含 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>
1 个解决方案
解决方案1
0 已采纳 2021-03-28 05:58:01
Give the parent div a px or rem or vh for height instead of percentage.给父 div 一个 px 或 rem 或 vh 作为高度而不是百分比。 Thats it.而已。
.border { border: 5px inset blue; height: 200px;important; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.