Question

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

我在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>

请有人帮忙，所以卡住了

Answer 1

尝试在您的CSS上输入

*{
   box-sizing:border-box;
}

Answer 2

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

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

CSS：

#hello-img {width: 30%};

你好图像只会占据父图像宽度的30％。

让我知道这是否有效！

Answer 3

好的，我找到了方法：

我用一张桌子，将图像插入DIV中，很容易。

代码如下：

<table>
<tbody>
<tr>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

DIV图像调整大小的噩梦-无法解决

3 个答案: