Question

.dinosaur{
      background-image:url(images/dinosaur.png);
      background-repeat:no-repeat;
      background-size:auto 300px;
      height:300;
      width:???;
      filter:hue-rotate(90deg) drop-shadow(10px 0px 5px black);
      float:left;
    }

我有一个 div，背景图像高度为 300，宽度为自动。我希望 div 与背景图像具有完全相同的尺寸，以便它像正常一样显示。如果我不包括 div 的宽度，或者如果我将其设置为自动，则它不起作用。我该怎么做才能使 div 的宽度与背景图像的宽度完全相同？

Answer 1

.container {
  width: 100%;
  height: 300px;
  background-image: url("https://via.placeholder.com/300");
  background-size: contain;
  background-repeat: no-repeat;
}

<div class="container"></div>

width: 100%;

会成功。高度也应该在 px

Answer 2

据我所知，您不能通过 background-image 执行此操作。因此，您可以使用 img 在 div 中尝试 display: inline-flex 标记。所以，现在图像的尺寸是那个 div 的宽度和高度。

这是一个例子

div {
  display: inline-flex
}
img {
  filter:hue-rotate(90deg) drop-shadow(10px 0px 5px black);
}

<div><img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196" /></div>

Answer 3

.img{
  background-image: url('https://source.unsplash.com/user/erondu');
  height: 300px;
  background-repeat:no-repeat;
  background-size:auto 300px;
  filter:hue-rotate(90deg) drop-shadow(10px 0px 5px black);
}

<div class="img"></div>

高度值应为 300 像素。你在那里有错别字并删除浮动属性。

将 Div 调整为与背景图片相同的尺寸

3 个答案: