Question

我正在建立一些网站，而CSS总是有同样的问题。

我在div容器中有两个图像。

例如，当我在div内放置文本时，div会采用文本的高度，但是当我出于某些原因将图像放入某些未知原因时，div突然似乎具有默认的高度。

如您所见，我在CSS中做出了响应的图像大小。我在div上使用了一种颜色，以便更清楚地了解发生的情况。

当我缩小浏览器屏幕时，div的高度保持相等（因此没有响应），并且由于某些原因，图像在div内被向下推。

我该如何解决。我希望div容器的高度响应于内部图像，并保持与图像相同的高度，并缩小浏览器屏幕。
最后但并非最不重要...我不明白什么？

谢谢您的帮助。

我的代码

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<div style="background-color:red;">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">   
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">   
</div>

</body>

</html>

Answer 1

如果您希望父div具有一定的大小，则应在div上强制标注并将其属性继承给子级...

/destination/home/user
/destination/home/user/...
/destination/etc
/destination/etc/...
/destination/data/app
/destination/data/app/...
/destination/boot
/destination/boot/...

div{
  height: 50vh;
  width: 50vw;
  background: red;
}

div>img{
  height: 100%;
  width: 100%;
}

Answer 2

请检查此内容。我认为它将为您提供帮助。 codepen

    div{background-color:red;width:200px;overflow:hidden;}
    div img{height:auto; max-width:100%;display:block;}

    <div>
        <img src="image" alt="text">
    </div>

Answer 3

您应该尝试将display: block;添加到<img>标记中。

我希望能有所帮助。

如果您不使用Bootstrap或其他CSS框架，则可能需要将reset.css文件添加到项目中。重置示例：https://meyerweb.com/eric/tools/css/reset/

Answer 4

尝试在图像上使用最大宽度：100％。这样可以将其大小限制为其父大小。

如何摆脱div内图片周围的默认边距？

4 个答案: