左侧为 CSS 图像缩放，右侧为细节答案

【问题标题】：CSS Image scaling on the left with the details on the right左侧为 CSS 图像缩放，右侧为细节
【发布时间】：2018-04-03 22:59:18
【问题描述】：

我正在尝试在左侧获取图像。随着窗口大小的变化，它应该缩放，保持纵横比。如果图像低于 600 像素，它应该滚动。在右边我想要图像的细节。像这样的：

到目前为止，我一直坚持让图像正确缩放。我能得到的最接近的是either the image covers the details 或pushes it bellow

.details {
  float: right;
  width: 200px;
  background: green
}

.theImage {
  width: 100%;
  object-fit: contain;
  object-fit: cover;
  overflow: hidden;
}

.container {
  background: red;
}

<div id="main">
  <div class="details">
    The details
  </div>
  <div class="container">
    <img class="theImage" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
  </div>

</div>

【问题讨论】：

如果低于 600 像素应该滚动什么？目前还不清楚你指的是什么。您的问题来自没有定义图像容器的宽度。要么给它一个float，要么明确地将其宽度设置为calc(100% - 200px)。
已编辑以使其更清晰。
但是什么应该滚动？

标签： css

【解决方案1】：

您可以将conatiner 和details 设置为某种宽度并使容器对齐。

这是工作小提琴：https://jsfiddle.net/46g7ptmp/

.details{
    float:right;
    width:20%;
    background:green
}
.theImage{
  width: 100%;
  min-width: 600px;
  object-fit: contain;
  object-fit: cover;
  overflow: hidden;
}
.container {
  background:red;
  width: 80%;
  overflow: auto;
}
#main {
  display: flex;
}

<div id="main">
<div class="container">
  <img class="theImage" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
</div>
<div class="details">
  The details
</div>

</div>

【讨论】：

这正是我想要的。感谢您的帮助！

【解决方案2】：

为什么不使用百分比来设置宽度？

#main {
    width: 100%;
}
.details {
  float: right;
  width: 20%;
  background: green
}

.theImage {
  width: 80%;
  object-fit: contain;
  object-fit: cover;
  overflow: hidden;
  
}

.container {
  background: red;
}

<div id="main">
  <div class="details">
    The details
  </div>
  <div class="container">
    <img class="theImage" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
  </div>

</div>

【讨论】：

我不敢相信事情就这么简单。谢谢！

【解决方案3】：

如果您需要为细节设置固定大小（200px），您可以为图像指定min-width: 600px，这样可以确保如果图像达到此阈值，则将其隐藏。

另外，请确保 overflow: hidden 设置为容器，而不是图像。

https://codepen.io/anon/pen/qoybLg

.details {
  float: right;
  width: 200px;
  background: green
}

.theImage {
  width: 100%;
  min-width: 600px;
  object-fit: contain;
  object-fit: cover;

}

.container {
  overflow: hidden;
  background: red;

}

<div id="main">
  <div class="details">
    The details
  </div>
  <div class="container">
    <img class="theImage" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
  </div>

</div>

【讨论】：

【解决方案4】：

600 像素以下的滚动、信息或文档是什么意思？如果您指的是文档，我将图片下方的文本设置为 600 像素以下。

这是你想要得到的吗？

#main{
  border: 1px dashed black;
  padding: 10px;
}

.details {
  display: inline-block;
  width: 35%;
  vertical-align: top;
}

.theImage {
  width: 60%;
  display: inline-block;
  object-fit: contain;
  object-fit: cover;
  overflow: hidden;
  margin-right: 3%;
}

@media (max-width: 600px){
  .theImage , .details{
    display: block;
    width: 100%;
  }
}

<div id="main">
 <img class="theImage" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
  <div class="details">
    <h2>The details</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
</div>

【讨论】：

【解决方案5】：

如果你不需要支持古老的浏览器，最简单的方法可能是flexbox。

使用display: flex的两列布局：

#main {
  display: flex;
}

.container {
  flex: 1; /* container grows with page size… */
}

.theImage {
  width: 100%; /* …and so does the image */
}

.details {
  padding: 0.5em;
  /* you can set width or min-width here to have the
     details column bigger… both percentage and absolute
     values will work */
}

div {
  border: 1px dotted hotpink;
}

<div id="main">
  <div class="container">
    <img class="theImage" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
  </div>
  <div class="details">
    The details
  </div>
</div>

使用简单的媒体查询在小窗口中滚动图像（由于 Stackoverflow 的布局，结果仅在整页视图中有效）：

#main {
  display: flex;
}

.theImage {
  width: 100%;
}

.details {
  padding: 0.5em;
}

.container {
  flex: 1;
}

@media (max-width: 600px) {
  .theImage {
    width: auto; /* original image size */
  }

  .container {
    overflow: auto; /* adds scrolling if the content (= image) is bigger than the container */
  }
}

div {
  border: 1px dotted hotpink;
}

<div id="main">
  <div class="container">
    <img class="theImage" src="https://ichef.bbci.co.uk/images/ic/720x405/p0517py6.jpg">
  </div>
  <div class="details">
    The details
  </div>
</div>

【讨论】：