使 .div 像图像一样答案

【问题标题】：Make a .div act like an image使 .div 像图像一样
【发布时间】：2016-08-27 07:07:30
【问题描述】：

我对容器的显示有疑问。

首先，我设法模拟了属性“object-fit: contains;”通过使用垂直对齐支柱和属性“text-align: center”（谢谢 IE）来获取图像。

在那里查看：http://codepen.io/babybackart/pen/vGQeoK

html:

<body>
   <div class="plancheBox">
      <div class="strut"></div><!--
      --><img src="http://images.forwallpaper.com/files/thumbs/preview/23/236747__kitten-soft-fluffy-tender_p.jpg">
   </div>
</body>

css:

body{
   height: 100%;
   width: 100%;
   display: block;
   text-align:center;
}

h1, h2{
   font-family: Arial, sans serif;
   font-weight: 300;
   color: white;
}

.plancheBox{
   background-color: green;
   position: absolute;
   display: block;
   width: 90%;
   height: 90%;
   vertical-align: middle;
}

.strut {
   height:100%;
   display:inline-block;
   vertical-align:middle;
}

.plancheBox img{
   max-height: 100%;
   max-width: 100%;
   vertical-align:middle;
}

我想在图像上添加文本，所以我将图像和文本框放在一个块中（文本框绝对出现在图像前面）。

在那里查看：http://codepen.io/babybackart/pen/BKGwZL

html:

<body>
  <div class="plancheBox">
    <div class="strut"></div><!--
    --><div class="container">
          <img src="http://eskipaper.com/images/photo-cat-1.jpg">
          <div class="descriptionBox">
             <h1>Joe le chat</h1>
             <h2>Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur.</h2>
          </div>
       </div>
  </div>
</body>

css:

body{
  height: 100%;
  width: 100%;
  display: block;
  text-align:center;
}

h1, h2{
  font-family: Arial, sans serif;
  font-weight: 300;
  color: white;
}

.plancheBox{
  background-color: green;
  position: absolute;
  display: block;
  width: 90%;
  height: 90%;
  vertical-align: middle;
}

.strut {
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

.container{
  max-height: 100%;
  max-width: 100%;
  display:inline-block;
  vertical-align:middle;
}

.container img{
  max-height: 100%;
  max-width: 100%;
  display:inline-block;
  vertical-align:middle;
}

.descriptionBox{
  background-color: blue;
  position: absolute;
  width: 60%;
  margin: 0 20% 5% 20%;
  bottom: 0;
}

问题是我的 .div ".container" 不像我在第一个示例中的图像，当窗口高度较小时，它会在底部溢出。

主要问题：有没有办法让“.container”像第一个示例中的图像一样？

额外问题：如何固定文本框的比例和大小与图像的大小？

提前感谢您的回答！

【问题讨论】：

标签： css image overflow contain

【解决方案1】：

您尝试同时根据其内容和根据其父项的内容来调整容器的大小。这不起作用。其中之一需要设置一些尺寸。根据您的示例，它应该适合容器的图像，因此我确定容器的尺寸并根据它调整图像的大小。

CSS：

.container {
    height: 100%; /* not max-height */
    width: 100%; /* not max-width */
    overflow: hidden;
    position: relative;
}
.container img {
    max-height: 100.1%; /* ".1" just to avoid small lines due to browser rendering */
    max-width: 100.1%; /* ".1" just to avoid small lines due to browser rendering */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

需要position: absolute 来“适应”容器内的图像并同时定位它。 50% 将图像的左上边框移动到容器的中心，transform 将图像向后移动一半的宽度和高度 - 所以它是居中的。

由于根据 OP 提供的更多信息，上述内容已过时。为此，您需要额外的 JS：

JS：

$('.plancheBox img').each( function() {

  var $img = $(this),
      $plancheBox = $img.closest('.plancheBox');

  $img.css({
    'max-height' : $plancheBox.height(),
    'max-width'  : $plancheBox.width()
  });

  $img.closest('.container').css({'position' : 'relative'});

});

CSS：

[...]

.container{
  display: table;
  margin: 0 auto;
  position: absolute;
}

.container img{
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
}

.descriptionBox{
  background-color: blue;
  position: absolute;
  bottom: 5%;
  right: 20%;
  left: 20%;
}

[...]

小提琴示例：jsfiddle.net/jpu8umd6/2

如果肖像 plancheBox 是可能的：jsfiddle.net/jpu8umd6/3

当 JS 应该考虑调整浏览器的大小时，添加一个事件处理程序，它会重置 css-changes 并再次计算所需的值。
见：jsfiddle.net/jpu8umd6/4

JS：

// calculateImageDimension() contains the JS described above

var resizeEnd;
$(window).on('resize', function() {
  clearTimeout(resizeEnd);
  resizeEnd = setTimeout(function() {
    $(window).trigger('resize-end');
  }, 200);
});

$(window).on('resize-end', function() {

    $('.plancheBox img').css({
    'max-height' : 'none',
    'max-width'  : 'none'
  })
  $('.plancheBox .container').css({'position' : ''});

  calculateImageDimension();
});

【讨论】：

非常感谢 Seika85 的回答，您的解决方案适用于图像。问题是我需要一个与图像同时调整大小的容器，以便根据它修复文本框。使用 100% 的容器，不可能将文本框固定到图像上。此解决方案相当于完全不为图像和文本框使用容器。（希望我说的够清楚）
你想要一个图像包装器，它根据包含的图像调整自身大小，但同时尊重它的父尺寸，该尺寸应传递给图像以调整其大小。这对于纯 CSS 是不可能的。正如我在这个例子中使用的那样，你需要 JS：jsfiddle.net/jpu8umd6/2
我理解与我的问题的斗争，这似乎是矛盾的......我实际上需要一个固定到图像的文本框，它可以根据容器的功能调整大小。也许我可以在不使用容器的情况下使用 JS 将文本框修复到图像上，这样图像就可以放入“.plancheBox”中而不会像第一个示例中那样溢出？
我理解你的问题，但是要根据图片尺寸制作一个文本框，你需要一个包装两者的容器。一方面，您希望此容器根据包含的图像调整自身大小，另一方面不超过其父尺寸。而这对于纯 CSS 是不可能的。您至少需要一个具有固定宽度/高度的元素。所以剩下的唯一选择就是像我在小提琴中所做的那样使用 JS。
如果我理解你的JS部分，你根据plancheBox的尺寸固定了图像的最大高度和最大宽度。当我尝试您的解决方案时，图像不会调整大小，而是根据 plancheBox 进行剪切。溢出的图像部分只是被“溢出：隐藏；”隐藏。 plancheBox 上的属性。

【解决方案2】：

由于.descriptionBox 有position: absolute;，（周围的）.container 可能应该有position:relative;

https://codepen.io/eye-wonder/pen/EKGPmZ

【讨论】：

您是否看到您的示例和发布的第一个 codepen OP 的图像大小差异？因为这就是他试图完成的事情。在您的示例中，图像与所需尺寸重叠，并且包装元素根据其子元素进行缩放。
谢谢@eye-wonder 的回答，你是对的，容器的位置：相对允许我将文本框固定到图片上。但是，它似乎并没有解决图像的剪切问题。当windows高度较小时，图片仍然会溢出容器（图片的不透明度设置为0.5可以看到）。
Safari (9) 和 Firefox (44) os x 以不同的方式呈现我的代码笔。我看不到任何图像被剪切。如果我滚动页面，整个图像都是可见的。
尝试将overflow:hidden 添加到您示例中的 plancheBox 元素中，以了解我们的意思。由于图像上方所有父容器的百分比尺寸，容器要么被拉伸到它的内容（图像），要么被它溢出。但这不是OP想要的。他/她想要一个具有可变尺寸的容器（仅取决于其父级）和一个调整自身大小以适应它的图像（如background-size:contain）。但另外还应该有一个标题，它不应该超过（包含的）图像的尺寸。这才是真正的斗争。
据我所知，Firefox 和 Chrome 不适合 plancheBox/image 的高度到窗口的高度。 Safari 似乎可以这样做。