CSS属性用于填充父div与图像，居中和更改大小以填充父级

Question

我有以下网站，其中使用浏览器大小动态扩展的父div包含带图像的子div。期望的效果如下：https://shibori-demo.squarespace.com/workshops-shibori/

我的pug代码如下：

article.eventlist-event.eventlist-event--upcoming.eventlist-event--hasimg.eventlist-hasimg.eventlist-event--multiday
    a.eventlist-column-thumbnail.content-fill(href=`${link}`)


        img(src=`${img_src}`, alt=`${img_src}`
           , style='position: static; float:left; width: 100%; object-fit: contain'
           )

此代码实现以下效果（父div为红色效果）：https://lingxiaoling-1.appspot.com/code。

一些例子：

总之，我希望图像是： 1.相对于父div居中 2.根据父div的大小调整大小，使其填充父div 3.不会溢出父div。

Answer 1

有几种解决方案。

a）最简单的方法是使用backgrund-image代替img代码：

.image {
  background-image: url(url-to-image);
  background-size: cover;
}

b）如果图像比例始终是seme，则可以使用img：

.parent {
  position: relative;
}

.img {
  position: absolute;
  height: 100%;
  width: auto;
  top: 0;
  left: 0 // or if you want to center it left: 50%; transform: translateX(-50%)
}

c）或者您可以使父母与父母的宽高比相同：

.parent {
  width: 100%;
  height: 0;
  padding-top: cacl(100% * (width of pic / height of pix));
  position: relative;
}

.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

可能还有很多其他人。 我无法进入您的网站，并且您没有提供足够的标记和样式来重现确切的问题，所以我可以根据您上面所写的内容推荐这些内容。

如果两种解决方案都无法解决您的问题，则需要发布更多标记和CSS，以获得帮助。