gpt4 book ai didi

css - DIV 图像调整大小的噩梦 - 无法修复

转载 作者:行者123 更新时间:2023-11-28 01:11:47 24 4
gpt4 key购买 nike

我刚刚花了几个小时试图解决这个问题,但没有用。

我在 DIV 中有图像,当我调整浏览器大小时它们会四处移动(而不是调整大小并保持相同的布局,它们会向下移动)。

我希望网站调整大小,但也要将布局和图像的纵横比保持在一定宽度 - 我已经对网站的其余部分进行了管理。

代码如下:

img {
max-width: 100%;
height: auto;
}

div.main {
background-image: url("images/imosec_02.gif");
background-repeat: no-repeat;
background-size: contain;
width: 100%;
height: 497px;
overflow: auto;
overflow-wrap: break-word;
}
<html>

<head>
<title>imosec2p</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="content-wrapper">
<div class="row">
<img src="images/imosec_01.gif" height="197" alt="">
</div>

<div class="main" alt="">
</div>

<div class="men" id="men">
<img src="images/imosec_03.gif" height="166" alt=""><img src="images/imosec_04.gif" height="166" alt=""><img src="images/imosec_05.gif" height="166" alt=""><img src="images/imosec_06.gif" height="166" alt=""><img src="images/imosec_07.gif" height="166"
alt=""><img src="images/imosec_08.gif" height="166" alt="">

</div>
</div>
</body>

</html>

有人可以帮忙解决这个问题吗

最佳答案

尝试为每个 <img> 添加 ID元素,然后使用 css,将宽度设置为百分比。这意味着宽度将根据屏幕尺寸而变化。例如:

<img src="hello.png" id="hello-img"/>

CSS:

#hello-img {width: 30%};

问候图片将只占父级宽度的 30%。

让我知道这是否可行!

关于css - DIV 图像调整大小的噩梦 - 无法修复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52061411/

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