具有未知图像尺寸的响应式宝丽来图像答案

【问题标题】：Responsive Polaroid Image with Unknown Image Dimensions具有未知图像尺寸的响应式宝丽来图像
【发布时间】：2017-09-12 23:24:58
【问题描述】：

我正在尝试创建一个带有宝丽来风格的画廊。当客户端上传图片时，我不知道图片的大小，所以我试图按比例缩放图片以适应框。

（上传图片时，我确实通过 PHP 将宽度或高度更改为 760 像素，但最终尺寸始终未知）

我几乎在我想要的地方都有它，但是当它缩小到移动设备尺寸时，它需要更加灵敏。而不是缩放宽度和高度（就像它应该的那样），图像离开画布。任何帮助或其他解决方案将不胜感激。

查看代码：HTML

<figure>
    <img src="https://placeimg.com/760/428/any" class="img-fill">
    <figcaption>Caption One</figcaption>
</figure>

<figure>
    <img src="https://placeimg.com/428/760/any" class="img-fill">
    <figcaption>Caption Two</figcaption>
</figure>

CSS：

figure{
  display:inline-block;
  height:350px;
  max-width:400px;
  min-width:300px;
  width:100%;
  overflow:hidden;
  position:relative;
  border:10px solid white;
  border-bottom:none;
      -webkit-box-shadow: 0 4px 16px rgba(0,0,0,0.75);
  -moz-box-shadow: 0 4px 16px rgba(0,0,0,0.75);
  box-shadow: 0 4px 16px rgba(0,0,0,0.75);
}
figcaption{
  position:absolute;
  bottom:0;
  background:white;
  max-width:400px;
  min-width:300px;
  width:100%;
  height:40px;
  line-height:40px;
  text-align:center;
  font-family:'Permanent Marker', cursive;
  font-size:18px;
}

.img-fill {
    min-height: 100%;
    min-width: 100%;
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

代码笔：

见笔Responsive Polaroid Images

【问题讨论】：

标签： html css responsive-design responsive

【解决方案1】：

您好，可能性很小：

1) 使用媒体查询来解决类似问题

@media screen and (max-width: 480px) {
figure {
    max-width: 200px;
    height: 300px;
    margin: 10px 20px
    }
}

2) 或使用 em 或 vw 或 vh 或 % 等相对尺寸单位来设置图形的宽度和高度

【讨论】：