Question

我目前有一个问题，尽管我首先是个小问题（可能是这样），但是我不知道如何完成此任务。我有一个span，它只是图像的包装，而span实际上应该具有子元素的width和height。默认情况下，宽度很好，但是span的高度不适合图像的高度。如果我将其更改为block，则高度很好，但是宽度为100％（这是我们的期望，因为它是block元素）。子图片的宽度和高度未知。

编辑：

我尝试了inline-block，但是它没有按预期工作。我在下面的代码段中为此添加了一个切换开关，请尝试一下。

$('#toggleInline').click(function() {
	$('#removed').removeAttr("style");
});

$('#toggleBlock').click(function() {
	$('#removed').removeAttr("style");
	$('#removed').css('display', "block");
});

$('#toggleInlineBlock').click(function() {
	$('#removed').removeAttr("style");
	$('#removed').css('display', "inline-block");
});

img {
  /* just because the sample image is too large */
  width: 50%;
}

span.removed {
  border: 3px solid #f00;
  background: repeating-linear-gradient(
    45deg,
    #f00,
    #f00 10px,
    #fff 10px,
    #fff 20px
  );
}

span.removed img {
  opacity: 0.85;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="removed" id="removed">
  <img src="https://images.pexels.com/photos/1036371/pexels-photo-1036371.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</span>

<div style="margin-top: 15px">
  <button id="toggleInline">
    display: inline (default)
  </button>

  <button id="toggleBlock">
    display: block
  </button>

  <button id="toggleInlineBlock">
    display: inline-block
  </button>
</div>

这是我期望的样子：

Answer 1

似乎带有display: inline-block;的元素的子节点具有基于百分比的宽度，它将自动切换为display: block; 在内部，这是有道理的，因为百分比与父元素的宽度（而不是图像的100％尺寸）有关（基本上具有width: min-content;，使其成为循环依赖项）。如果将图像的宽度设置为固定宽度，则它会按预期工作，，或者根本不指定宽度。

想象一下，您当前的定义基本上是这样做的：


爸爸：我和你一样大，我的孩子。

孩子：我是你的一半宽度，爸爸！

爸爸：但是等等，那把我缩小到一半的宽度，因为我正好   吞没你。

孩子：Cmon爸爸，只剩下一半的空间   像之前一样。我要缩水！

爸爸：不要收缩，否则这整件事   将重新开始，我们都将以0px宽！

$('#toggleInline').click(function() { $('#removed').removeAttr("style"); }); $('#toggleBlock').click(function() { $('#removed').removeAttr("style"); $('#removed').css('display', "block"); }); $('#toggleInlineBlock').click(function() { $('#removed').removeAttr("style"); $('#removed').css('display', "inline-block"); });

img { /* just because the sample image is too large */ width: 50%; } span.removed { border: 3px solid #f00; background: repeating-linear-gradient( 45deg, #f00, #f00 10px, #fff 10px, #fff 20px ); } span.removed img { opacity: 0.85; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><span class="removed" id="removed"> <img src="https://images.pexels.com/photos/1036371/pexels-photo-1036371.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"> </span> </p> <div style="margin-top: 15px"> <button id="toggleInline"> display: inline (default) </button> <button id="toggleBlock"> display: block </button> <button id="toggleInlineBlock"> display: inline-block </button> </div>

Answer 2

原因是您的宽度：img标签上的宽度为50％，因此img始终是跨度的50％。要更改此设置，您可以将img宽度设置为：100％并更改跨度的宽度以获取所需的效果。

body {
  width: 100%;
}
img {
  /* just because the sample image is too large */
  width: 100%;
}

span.removed {
  display: inline-block;
  width: 50%;
  border: 3px solid #f00;
  background: repeating-linear-gradient(
    45deg,
    #f00,
    #f00 10px,
    #fff 10px,
    #fff 20px
  );
}

span.removed img {
  opacity: 0.85;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="removed" id="removed">
  <img src="https://images.pexels.com/photos/1036371/pexels-photo-1036371.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</span>

Answer 3

span元素的默认显示值为内联，这基本上意味着它的高度与为span的父元素设置的line-height相同。显示块始终将宽度设置为100％，但是这两者结合在一起，即display: inline-block，基本上是height: auto;，两者都可以相应地更改，并且可以根据其子元素进行扩展。只是为了很好的措施，设置宽度为：auto;以及该元素。

Answer 4

为跨度合并inline-block，为img合并block：

.removed {
  display: inline-block;
  border: 3px solid #f00;
  background: repeating-linear-gradient(
    45deg,
    #f00,
    #f00 10px,
    #fff 10px,
    #fff 20px
  );
}

.removed img {
  display: block;
  opacity: 0.85;
  width: 200px;
}

<span class="removed" id="removed">
  <img src="https://images.pexels.com/photos/1036371/pexels-photo-1036371.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=100">
</span>

或者将inline-block用于跨度和图像，并将line-height设置为0。

.removed {
  display: inline-block;
  border: 3px solid #f00;
  background: repeating-linear-gradient(
    45deg,
    #f00,
    #f00 10px,
    #fff 10px,
    #fff 20px
  );
}

.removed img {
  display: block;
  opacity: 0.85;
  width: 200px;
}

<span class="removed" id="removed">
  <img src="https://images.pexels.com/photos/1036371/pexels-photo-1036371.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=100">
</span>

请勿对img使用相对宽度，因为它将基于父宽度来计算。因此，width: 50%;用于img将生成一个img，仅填充跨度的一半。

跨度应具有子img的宽度和高度

编辑：

4 个答案: