Css 使.div表现得像一个图像

我有一个关于集装箱展示的问题

首先，我通过使用垂直对齐的支柱和属性“text align:center”（谢谢IE）来模拟图像的属性“object fit:contain；”

请看这里：

html:

我想在图像上添加一个文本，所以我将图像和一个文本框放在一个整体中（文本框绝对显示在图像前面）

请看这里：

html:

问题是my.div“.container”的行为与第一个示例中的图像不同，当窗口高度较小时，它会溢出底部

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

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

---

提前感谢您的回答

您尝试根据容器的内容调整容器的大小，同时根据其父级调整容器的大小。这是行不通的。其中一个需要设置一些维度。 根据您的示例，图像应该适合容器，因此我对容器进行了尺寸标注，并让图像根据它进行尺寸调整

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%);
}

$('.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'});

});

[...]

.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%;
}

[...]

// 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();
});

position:absolute

用于将图像“适配”到容器中，同时将其定位。

50%

将图像的左上边框移动到容器的中心，而

变换将图像的宽度和高度向后移动一半，使其居中


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

JS:

.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%);
}

$('.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'});

});

[...]

.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%;
}

[...]

// 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();
});

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%);
}

$('.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'});

});

[...]

.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%;
}

[...]

// 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();
});

小提琴示例：


如果可以使用纵向平面复选框：


JS应考虑调整浏览器大小时，添加事件处理程序，重置css更改并再次计算所需的值。

见：

JS:

.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%);
}

$('.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'});

});

[...]

.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%;
}

[...]

// 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();
});

因为
.descriptionBox
具有
位置：绝对
容器（周围）
。容器
可能应该有
位置：相对

非常感谢Seika85的回答，您的解决方案适用于图像。问题是我需要一个与图像同时调整大小的容器，以便根据它修复文本框。如果使用100%容器，则无法将文本框固定到图像上。此解决方案相当于根本不为图像和文本框使用容器。（我希望我足够清楚）您需要一个图像包装器，它根据包含的图像调整自身大小，但同时尊重其父维度，该维度将传递给图像以调整其大小。这在纯CSS中是不可能的。正如我在本例中使用的那样，您需要JS：我理解与我的问题的斗争，这似乎是矛盾的。。。我实际上需要一个文本框，它固定在一个图像上，根据其容器的功能调整大小。也许我可以使用JS将文本框固定到图像上，而不使用容器，这样图像就可以像第一个示例中那样放入“.plancheBox”而不会溢出？我理解您的问题，但要根据图片尺寸制作文本框，您需要一个容器来包装两者。您希望此容器一方面根据包含的图像调整自身大小，另一方面不超过其父级尺寸。这在纯CSS中是不可能的。至少需要一个具有固定宽度/高度的元素。所以，剩下的唯一选择就是使用JS，就像我在小提琴中已经做的那样。如果我很了解你的JS部分，你可以根据plancheBox的尺寸固定图像的最大高度和最大宽度。当我尝试您的解决方案时，图像不会调整大小，而是根据plancheBox进行剪切。溢出的图像部分被plancheBox上的“overflow:hidden；”属性隐藏。您是否看到您的示例和发布的第一个codepen OP在图像大小上的差异？因为这就是他想要实现的。在您的示例中，图像与所需尺寸重叠，包装元素根据其子级进行缩放。谢谢@eye wonder的回答，您是对的，容器的位置：相对允许我将文本框固定到图片上。但是，它似乎无法解决图像的剪切问题。当窗口的高度很小时，图像仍然溢出容器（如果将图像的不透明度设置为0.5，则可以看到图像）。Safari（9）和Firefox（44）os x以不同的方式渲染我的代码笔。我看不到他们中任何一个的图像被剪切。如果我滚动页面，整个图像都是可见的。请尝试将
overflow:hidden
添加到示例中的plancheBox元素，以了解我们的意思。由于图像上方所有父容器的百分比维度，这些容器要么被拉伸到其内容（图像），要么被其溢出。但这不是OP想要的。他/她想要一个具有可变尺寸的容器（仅取决于其父容器）和一个适合它的图像大小（如
背景大小：contain
）。但是，另外还应该有一个标题，它不应该超过（包含的）图像的尺寸。就我所见，Firefox和Chrome无法将plancheBox/图像的高度与窗口的高度相匹配。狩猎似乎可以做到这一点。