时间戳

首页 > 解决方案 > 如何摆脱div内图像周围的默认边距？

html - 如何摆脱div内图像周围的默认边距？

问题描述

我正在建立一些网站，并且总是遇到与 css 相同的问题。

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

例如，当我在 div 中放置文本时，div 占据了文本的高度，但是当我出于某种未知原因将图像放入时，div 突然似乎具有默认高度。

正如你所看到的，我已经在我的 css 中调整了图像的大小。我在 div 上加入了一种颜色，只是为了更清楚地了解发生了什么。

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

  1. 我该如何解决这个问题。我希望 div 容器高度能够响应内部图像，并保持与图像相同的高度以及缩小浏览器屏幕。
  2. 最后但同样重要的是......我不明白的是什么？

谢谢你帮助我。

我的代码

<!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>

标签： htmlcssimage

解决方案

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

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

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

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

推荐阅读