span 应该有子 img 的宽度和高度

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;，使其成为循环依赖）。如果将图像的宽度设置为固定宽度，它会按您的预期工作，或者根本不指定宽度。

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

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

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

爸爸：但是等等，这会让我的宽度减少一半，因为我正好吞没了你。

孩子：来吧，爸爸，剩下的空间只有以前的一半了。我需要缩小！

爸爸：别退缩，否则这一切都会重新开始，我们都会变得更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>