Question

我有.container > .wrapper > img。这是一项任务：

img必须具有最大宽度/高度，保持其纵横比，100％可见且不超过.container的尺寸。
图片不得超过其自然尺寸。
图像的宽度/高度未知。
.container已知具有固定（以像素为单位）的宽度/高度，但确切的尺寸未知。
.wrapper必须与img紧密贴合（必须与图像具有相同的宽度和高度）。包装是将内容放在图像上的特殊元素，例如： G。徽章。我在代码段中添加了示例标签来演示这一点。这应该是可能的。

标记：

<div class="container">
  <div class="wrapper">
    <div class="label">new!</div>
    <img src="https://via.placeholder.com/150x300">
  </div>
</div>

我认为我可以display: block; max-height: 100%使用img，does not可以使用，因为.wrapper（图片父级）高度不固定，它无法修复 - 见第5点。

我还能用纯CSS实现所描述的任务吗？我更喜欢在IE11中运行的解决方案，但其他人也会受到赞赏。

编辑：非常重要容器和图片可以是任何大小。我将设置添加到代码段以进行不同尺寸的测试。

如果图像大于容器，则应该渲染不大于容器。

如果图像小于容器，则应该渲染不大于自然尺寸。

它应该适用于水平容器/垂直图像和垂直容器/水平图像。

编辑2：非常重要 .wrapper 不只是一个“令人讨厌的干扰”元素。它是功能性的：包装器用于在其内部的图像上放置绝对定位的内容（例如标签，徽章），它必须支持变换（镜像，翻译），css过滤器等，一般来说 - 我们通常用块元素做的所有事情

游乐场：

$(function() {
  $('input[name=container-width]').on('change', function() {
    $('.container').css('width', $(this).val() + 'px')
  })

  $('input[name=container-height]').on('change', function() {
    $('.container').css('height', $(this).val() + 'px')
  })

  $('input[name=image-width]').on('change', function() {
    var width = $(this).val()
    var height = $('input[name=image-height]').val()
    $('img')[0].src = 'http://via.placeholder.com/' + width + 'x' + height
  })
  
  $('input[name=image-height]').on('change', function() {
    var height = $(this).val()
    var width = $('input[name=image-width]').val()
    $('img')[0].src = 'http://via.placeholder.com/' + width + 'x' + height
  })

})

.container {
  width: 200px; /* can have any value in pixels */
  height: 200px; /* can have any value in pixels */
  background-color: green;
}

.wrapper {
  outline: 1px solid yellow;
  position: relative; /* for label */
}

.label {
  position: absolute;
  background-color: blue;
  color: white;
}

.label.-top-left {
  top: 10px;
  left: 10px;
}

.label.-bottom-right {
  bottom: 10px;
  right: 10px;
}

<h2>Settings</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Container: width <input type="number" step="10" name="container-width" value="200"> height <input type="number" step="10" name="container-height" value="200">
<br>
Image: width <input type="number" step="10" name="image-width" value="150"> height <input type="number" step="10" name="image-height" value="300">
<br>
<br>

<h2>Demo</h2> 

<div class="container">
  <div class="wrapper">
    <div class="label -top-left">new!</div>
    <div class="label -bottom-right">good!</div>
    <img src="http://via.placeholder.com/150x300">
  </div>
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>

<h2>How it should look like</h2>

<p>This is not the solution, because is has many hardcoded dimensions. It's just a visual demo of what I want to achieve.</p>

<div style="width: 200px; height: 200px;background-color: green">
  <div style="width: 100px; height: 200px; position: relative;outline: 1px solid yellow">
    <div style="position: absolute;
  top: 10px;
  left: 10px;
  background-color: blue;
  color: white;">new!</div>
      <div style="position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: blue;
  color: white;">good!</div>
    <img style="max-width: 100%; max-height: 100%;" src="http://via.placeholder.com/150x300">
  </div>
</div>

Answer 1

这对你有用吗？

.container {
  width: 200px;
  /* can have any value in pixels */
  height: 200px;
  /* can have any value in pixels */
  background-color: green;
}

.container-2 {
  width: 300px;
  height: 300px;
}

.wrapper {
  outline: 1px solid yellow;
  display: inline;
  height: inherit;
}

img {
  width: auto;
  max-height: 100%;
  display: inline-block;
  vertical-align: bottom;
}

<div class="container">
  <div class="wrapper">
    <img src="http://via.placeholder.com/150x300">
  </div>
</div>
<br>
<div class="container container-2">
  <div class="wrapper">
    <img src="http://via.placeholder.com/30">
  </div>
</div>

Answer 2

查看以下代码，这应该适合您您需要将max-width: 100%和max-height:100%应用于img 和display: inline;到您的img parent div

.container {
  width: 200px; /* can have any value in pixels */
  height: 200px; /* can have any value in pixels */
  background-color: green;
}

.wrapper {
  outline: 1px solid yellow;
  display: inline;
}
.wrapper img{
  max-width: 100%;
  max-height: 100%;
  height: auto;
  vertical-align: top;
}

<div class="container">
  <div class="wrapper">
    <img src="http://placehold.it/150x300">
  </div>
</div>

<hr/>

<div class="container">
  <div class="wrapper">
    <img src="http://placehold.it/1500x800">
  </div>
</div>

<强>更新如@TemaniAfif所指出的那样，在图像中添加了vertical-align: top;到固定的额外间隙

Answer 3

使用包装元素

上的背景图像添加图像

.wrapper {
    outline: 1px solid yellow;
    background: url(http://via.placeholder.com/150x300);
    background-size: cover;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

.container＆gt; .wrapper＆gt; img：img最大化，但不大于.container（祖父母） - 怎么样？

3 个答案: