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

Question

我目前有一个问题，我首先虽然是微不足道的（可能是），但我不知道如何完成这项工作。我有一个span，它只是一个图像的包装，而span实际上应该有子元素的width和height。默认情况下，宽度很好，但span的高度不适合图像的高度。如果我将它更改为block，高度很好，但它的宽度为100％（这是一种预期，因为它是一个block元素）。儿童图像的宽度和高度未知。

Edit:

我实际上尝试过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 width：100％并更改span的宽度以获得所需的效果。

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;，两者都可以相应地更改，并且可以根据子元素进行扩展。只是为了好的措施，设置宽度：自动;对于那个元素也是如此。

Answer 4

将inline-block与block结合使用为img：

.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的相对宽度，因为这将基于父宽度计算。因此，用于img的width: 50%;会产生一个img，只填充跨度的一半。