Question

我对容器的显示有疑问。

首先，我设法模拟属性＆＃34; object-fit：contains;＆＃34;通过使用verticaly alligned strut和属性＆＃34; text-align：center＆＃34;来获取图像。（谢谢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＆＃34; .container＆＃34;在第一个例子中，它不像我的图像，它在窗户的底部溢出。身高很小。

主要问题：有没有办法制作＆＃34; .container＆＃34;像第一个例子中的图像一样？

特别提问：如何根据图片大小修正文本框的比例和大小？

提前感谢你的答案！

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需要＆＃34;适合＆＃34;容器内的图像同时位于它的位置。 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();
});

Answer 2

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

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

使.div像图像一样

2 个答案: