Html 响应图像大小调整

我正试图以airbnb（）

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

如果更改窗口的宽度，图像将相应调整大小

如果更改窗口的高度，图像也将相应调整大小

根据最小图像的高度调整所有图像的大小。这意味着，如果我有两个图像，一个在横向，一个在纵向，纵向图像将调整大小，以适应横向图像的高度

现在，我已经能够实现数字1和2，但我正在努力实现数字3只使用CSS

我做了一件事来告诉你我在说什么

.集装箱img img{
位置：绝对位置；
最大高度：100%；
左：0；
右：0；
保证金：0自动；
最大宽度：100%；
}

如果调整预览框的宽度或高度，您将注意到所有内容都是完全响应的。但问题是肖像图像（红色边框）与风景图像（蓝色边框）不匹配。 换句话说：我希望保持纵横比，但我希望肖像图像的最大高度等于风景的高度（当然，在px中不指定任何“固定”高度）

---

有人能帮我吗？非常感谢你

您似乎在使用引导（如果我错了，请纠正我）。如果是这样，使用img响应类作为img标签，如下所示

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

---

我不知道您需要什么，但是，请尝试以下css代码：

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

---

但是如果你想使用旋转木马组件，我建议你研究一下js插件，比如下面的链接：

好的，我现在不知道为什么它能工作，但我做到了！！：D

在这里您可以找到工作小提琴： 以下是代码和css：

<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复制了它）

---

非常感谢所有回答这个问题的人

你需要js，css不能告诉你哪张图片最小或最大，它只是为你设计的Answare@Pete！我也在考虑这个问题，但airbnb似乎在没有任何js的情况下完成了这项工作。我试图调试他们的css样式，但我还找不到“键”规则！他们似乎对每个状态和屏幕大小都有大量的媒体查询，以确保在给定屏幕尺寸的情况下，图像都具有一定的大小，他们可能也从相同大小的图像开始，所以他们不必根据不同的纵横比调整大小。我猜你也希望肖像图像覆盖整个景观（阅读：裁剪合适？），或者你不介意在另一幅图像下看到景观图像？@ArnoTenkink是的，我不清楚！换句话说：我希望肖像图像的最大高度等于风景的高度（但当然没有在px中指定任何“固定”高度）。这两幅图像的宽度将保持不同，以保持纵横比为您答案！是的，我使用的是bootstrap，但img responsive似乎仅在第1点和第2点上对我有所帮助，我仍然无法实现第3点如果第3点按照您的意愿工作，您的图像会不会丢失其纵横比？这不是你的肖像画占据风景画高度的原因吗？是的，我不清楚！我想保持纵横比，我只想让肖像图像的最大高度等于风景的高度（但当然没有在px中指定任何“固定”高度）。你的img容器不是基于媒体大小的固定高度吗？在我的一个实现中，我使用纯javascript根据媒体大小测量高度并调整容器大小，这有助于调整大小一致的图像。然而，风景图片和肖像仍然有不同的高度，但是容器将把它们放在一个高度一致的容器中，这样看起来和感觉就不会让人感到刺痛。

<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;
}

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