属性使用图像填充父div，居中并更改大小以填充父级。
属性使用图像填充父div，居中并更改大小以填充父级。
提问于 2018-04-21 16:39:40
我有以下的网站，其中的父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溢出。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-01 06:00:08
有几个解决办法。
( a)使其工作的最简单方法是使用backgrund-image而不是img标记：
.image {
background-image: url(url-to-image);
background-size: cover;
}( b)如果图像比例始终是符号，则可以使其与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，以获得帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49957968
复制相关文章
相似问题
腾讯云开发者
