使 .div 表现得像一个图像

Question

我对容器的显示有疑问。

首先，我设法通过使用垂直对齐的支柱和属性 "text-align: center"（谢谢 IE）模拟图像的属性 "object-fit: contain;"。

See it there: 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;
}

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

See it there: 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” 不像我在第一个示例中的图像，当 windows' 高度较小时它会溢出到底部。

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

附加问题：如何固定文本框的比例和大小与图片的大小？

提前感谢您的回答！

Answer 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 需要 "fit" 容器中的图像，同时定位它。 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%;
}

[...]

示例 fiddle：jsfiddle.net/jpu8umd6/2

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

调整浏览器大小时，应考虑 JS，添加一个事件处理程序，重置 css-更改并再次计算所需的值。
参见：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();
});

Answer 2

因为 .descriptionBox 有 position: absolute; (周围) .container 应该有 position:relative;

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

使 .div 表现得像一个图像

Make a .div act like an image

css

image

overflow

contain