在内部放置带有惰性图像的正方形元素

问题描述 投票:2回答:1

我正在尝试为静态网站制作纯CSS图片库。我想创建带有居中延迟加载的图像预览的正方形元素。

当设置了比例宽度和固定高度时,我的标记效果很好,但是我找不到一种方法来实现图像容器的固定长宽比。

我尝试过:

  1. 将所有内容重写为弹性框。它会中断懒惰的图像加载-似乎在某个时候,每个图像都会出现在视口中,从而导致其加载。对我而言,无法在服务器端生成预览。
  2. padding-bottom技巧。它完全破坏了object-fit: cover;和图像预览居中的行为。
  3. vw还可以,但是我的容器已经在一个灵活的容器中,因此我无法准确地计算出它。
  4. calc。不出所料,它不适用于动态值,但是我以防万一:)

使用纯CSS在哪里获得高度取决于宽度的方法?

以下是代码段(与JsFiddle相同):

div.image_list {
  display: block;
  width: 300px;  /* for example, not set in real case */
}

.image_wrapper {
  float: left;
  width: 30%;
  height: 100px;  /* FIXME: make height always equal to width */
  padding: 2%;
  background: blue;  /* for example only */
}

img {
  object-fit: cover;
  max-width: 100%;
  width: 100%;
  height: 100%;
}
<div class="image_list">
  <div class="image_wrapper">
    <img src="https://bigmemes.funnyjunk.com/pictures/Warning+long+post+short+postmedium+post_ba781a_5089470.jpg" loading="lazy">
  </div>
  <div class="image_wrapper">
    <img src="https://images.opencollective.com/jsbin/fef9bb5/logo/256.png" loading="lazy">
  </div>
  <div class="image_wrapper">
    <img src="http://voidcanvas.com/wp-content/themes/reader/images/logo.png?v=2" loading="lazy">
  </div>
  <div class="image_wrapper">
    <img src="http://voidcanvas.com/wp-content/themes/reader/images/logo.png?v=2" loading="lazy">
  </div>
  <div class="image_wrapper">
    <img src="https://bigmemes.funnyjunk.com/pictures/Warning+long+post+short+postmedium+post_ba781a_5089470.jpg" loading="lazy">
  </div>
  <div class="image_wrapper">
    <img src="https://images.opencollective.com/jsbin/fef9bb5/logo/256.png" loading="lazy">
  </div>

</div>
css height
1个回答
-1
投票

您可以为此使用js。只需在html代码中添加一个小的脚本标签即可。

//this is using jQuery
var cw = $('#Id of the image').width();
$('#Id of the image').css({'height':cw+'px'});
//for javaScript
var vw = document.getElementById('Id of the image');
var width = vw.width;
document.getElementById('Id og the image').style.height = width +'px';
热门问题
推荐问题
最新问题