响应式图片调整大小

Question

我正在尝试创建一个以airbnb（https://www.airbnb.it/rooms/5382144?location=Roma%20Termini%2C%20Piazza%20dei%20Cinquecento%2C%20Roma%2C%20RM）为灵感的图像旋转木马

如果您使用上面的链接，您会注意到以下内容：

1. 如果更改窗口的宽度，图像将相应调整大小
2. 如果更改窗口的高度，图像也会相应调整大小
3. 根据最小图像的高度调整所有图像的大小。这意味着如果我有两个图像，一个是横向图像，一个是纵向图像，肖像图像将调整大小以适应风景图像的高度。

现在，我已经能够获得数字1和数字2，但我很难用CSS来实现数字3。

我做了一个jsfiddle，告诉你我在说什么 https://jsfiddle.net/hvbvhc0q/5/

<div class="container">    
<div class="">
<div class="container-img">
 <img src="https://a0.muscache.com/im/pictures/67194098/f47fcd01_original.jpg?aki_policy=x_large" style="border: 2px solid blue">
  </div>

  <div class="container-img">
  <img src="https://a0.muscache.com/im/pictures/67194187/634b2de1_original.jpg?aki_policy=x_large" style="border: 2px solid red">
  </div>
</div>
</div>

.container-img img {
   position: absolute;
   max-height: 100%;
   left: 0;
   right: 0;
   margin: 0 auto;
   max-width: 100%;
}

如果您在预览框的宽度或高度上调整大小，您会发现一切都完全响应。但问题是肖像图像（红色边框）不适合风景图像（蓝色边框）。 换句话说：我想保持纵横比，但我希望肖像图像的最大高度等于景观的高度（但当然没有在px中指定任何“固定”高度）。



任何人都可以帮助我吗？非常感谢你！

Answer 1

我不知道你需要什么，但是，试试这个css代码：

.container-img img {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 100%;
    max-height: 500px; /*change for your necessity*/
}

但是如果你想使用轮播组件，我建议你为此研究插件js，比如这个链接：https://github.com/yadhu/airbnb

Answer 2

看来你正在使用bootstrap（如果我错了，请纠正我）。如果是这样，请使用类img-responsive for img标签，如下所示。

<img class="img-responsive" src="logo.png" alt="logo">

Answer 3

好的，我现在不知道为什么会这样，但我做到了！ ：D

在这里你可以找到工作小提琴：https://jsfiddle.net/g8t2o9ft/6/ 这是代码和css：

["API1,3", "API2,2", "API3,1"]

正如你所看到的，它响应宽度（目标1，简单），它响应高度（目标2，由于规则最大宽度：105vh）并且两个图像遵循相同的高度保持相同的宽高比（目标3）。

基本上允许我实现目标3的技巧是将这些规则应用于父div：

<div class="container">    
  <div  class="container-inner">
  <div>
  <div>
  <img src="https://a0.muscache.com/im/pictures/67194046/877580d4_original.jpg?aki_policy=xx_large" style="border: 2px solid blue">
  </div>
  <div>
  <img src="https://a0.muscache.com/im/pictures/67194187/634b2de1_original.jpg?aki_policy=x_large" style="border: 2px solid red">
  </div>
  </div>
  </div>
  </div>

img {
position: absolute;
height: 100%;
left: 0;
right: 0;
margin: 0 auto;
max-width: 100%;
}

.container-inner {
position: relative;
padding-bottom: 65%;
}

.container {
max-width: 105vh;
}

但我仍然不知道为什么会这样（我从airbnb css复制了它）

非常感谢回答这个问题的每个人！