Question

我有一个javascript函数可以调整图像大小，通过php在页面上动态生成，以确保它们填充包含它们的div的宽度和高度。不幸的是，我无法控制图像的宽高比，有些图像无法拉伸以覆盖div的高度而不会出现扭曲。

我的解决方案是尝试使用javascript添加margin-top css参数，将图像底部和div高度之间的距离分配为该参数的值（例如maxHeight- imageHeight）。但是，使用此方法，图像会消失超出div的范围。

我想知道是否有人对此有任何解决方案。要么是更好的方法，要么是使这种方法有效？

Answer 1

如果你想在没有扭曲的情况下按图像填充你的div，你必须用更接近div大小的图像的宽度或高度填充它。

.imageInDiv{
   width: 100%;
   height: 100%;
   max-width: 100%;
   max-height: 100%;
   }

如果你希望你的图像位于它的父div的中心：

.parentDiv{
   display:flex;
   display: -webkit-flex;
   justify-content:center;
   -webkit-justify-content:center;
   align-items:center;
   -webkit-align-items:center;
 }

根据div底部的图像距离按比例调整margin-top

1 个答案: