CSS图像缩放在左侧，右侧有详细信息

Question

我试图在左边拍一张照片。随着窗口大小的变化，它应该按比例缩放，保持纵横比。如果图像低于600px，它应该滚动。在右边我想要图像的细节。像这样：

到目前为止，我一直坚持让图像正确缩放。我能得到的最接近的是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>

Answer 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>

Answer 2

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

＆＃13;

＆＃13;

function getPageOfData(pageNum) {
  var pageLength = 50;
  var pageStart = (pageNum - 1) * pageLength;
  var pageEnd = pageStart + pageLength;

  var query = 'SELECT * FROM tbl LIMIT ' + pageStart + ',' + pageEnd;
}

＆＃13;

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

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

.container {
  background: red;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您需要具有固定大小的详细信息（200px），则可以为图片指定min-width: 600px，这可确保如果图片达到此阈值，则可以隐藏。

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

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

＆＃13;

＆＃13;

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

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

}

.container {
  overflow: hidden;
  background: red;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

600px下的滚动，信息或文档是什么意思？如果你的意思是文件，我在600px以下的图像下面做了文字。

这是你想要得到的吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

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

使用display: flex的两列布局：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;