CODEWITHSUNDEEP
css
Ryan
Ryan

Reputation: 2542

CSS Image scaling on the left with the details on the right

Im trying to get an image on the left. It should scale, keeping the aspect ratio, as the window size changes. If the image goes bellow 600px it should scroll. On the right I want the details of the image. Something like this:

enter image description here

So far I'm stuck on getting the image to scale properly. The closest I can get is either the image covers the details or 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>

Upvotes: 2

Views: 2565

Answers (5)

Jorjon
Jorjon

Reputation: 5434

If you need to have fixed size for the details (200px), you can specify the min-width: 600px for the image, which makes sure that if the image reaches this threshold, it's hidden.

Also, make sure that overflow: hidden is set to the container, not on the image.

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>

Upvotes: 1

helb
helb

Reputation: 3234

If you don't need to support ancient browsers, the easiest way is probably flexbox.

Two column layout using 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>

Scrolling the image in small window, using a simple media query (result works only in Full page view due to Stackoverflow's layout):

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

Upvotes: 0

Saravanan I
Saravanan I

Reputation: 1229

You can style the conatiner and details to some width and make the container align.

Here is working fiddle : 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>

Upvotes: 2

Jeremy
Jeremy

Reputation: 1384

What do you mean with scroll under 600px, the info or the document? I did the text underneath the image under 600px for if you meant the document.

Is this what you are trying to get?

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

Upvotes: 0

Frank Groot
Frank Groot

Reputation: 570

Why don't u use percentages for width settings?

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

Upvotes: 1

Related Questions