CODEWITHSUNDEEP
css
user233111
user233111

Reputation: 53

Unable to properly scale image within container

I am having trouble scaling an image within a container. I have two columns, the left column set at 280px and the right column taking whatever is left. The image goes into the right column - we do not know its size beforehand (in the example it is 947px).

If the window is large enough all is fine, but when it becomes smaller the size of the image forces the right column under the left column. The image finally scales to the body once the window becomes small enough.

<!DOCTYPE html>
<head>
  <style type='text/css'>
    @media only screen and ( min-width: 641px ) { /* 641 or greater */
      img { max-width: 100%; height: auto; display: block; }
      .leftcol  { width: 280px; float: left; outline: 5px dotted green; } 
      .rightcol {               float: left; outline: 5px dotted red;   }
    }
  </style>
</head>

<body>
  <div class="leftcol">
    Home
  </div>
  <div class="rightcol">
    <img src="https://glsmyth.files.wordpress.com/2014/07/a-space-in-time.jpg" alt="Homepage image" />
  </div>
</body>
</html>

Upvotes: 1

Views: 49

Answers (2)

disinfor
disinfor

Reputation: 11533

There are a couple things going on:

  1. Float doesn't calculate remaining space very well, so you can use calc(100% - 280px) on your right column. This ensures that it's always 100% MINUS the other column width:

  2. Your image still needs width: 100% set, since max-width is relative to the image's actual size:

@media only screen and ( min-width: 400px) {
  /* 641 or greater */
  img {
    max-width: 100%;
    height: auto;
    display: block;
    width: 100%;
  }
  .leftcol {
    width: 280px;
    float: left;
    outline: 5px dotted green;
  }
  .rightcol {
    float: left;
    outline: 5px dotted red;
    width: calc(100% - 280px)
  }
}
<div class="leftcol">
  Home
</div>
<div class="rightcol">
  <img src="https://glsmyth.files.wordpress.com/2014/07/a-space-in-time.jpg" alt="Homepage image" />
</div>

Using flex is better solution for you.

@media only screen and ( min-width: 400px) {
  /* 641 or greater */
  .flex {
    display: flex;
    align-items: flex-start;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
    width: 100%;
  }
  .leftcol {
    width: 280px;
    outline: 5px dotted green;
  }
  .rightcol {
    outline: 5px dotted red;
    flex: 1 1 100%;
  }
}
<div class="flex">
  <div class="leftcol">
    Home
  </div>
  <div class="rightcol">
    <img src="https://glsmyth.files.wordpress.com/2014/07/a-space-in-time.jpg" alt="Homepage image" />
  </div>
</div>

Upvotes: 1

Dan Mullin
Dan Mullin

Reputation: 4415

Flexbox is a good solution for what you're trying to acheive. With the modifications below, it will work as intended.

<!DOCTYPE html>
<html>
<head>
    <style type='text/css'>
        @media only screen and ( min-width: 641px) {
            body {
                display: flex;
                align-items: flex-start;
            }
            img {
                max-width: 100%;
            }
            .leftcol {
                width: 280px;
                min-width: 280px;
                outline: 5px dotted green;
            }
            .rightcol {
                outline: 5px dotted red;
            }
        }
    </style>
</head>

<body>
    <div class="leftcol">
        Home
    </div>
    <div class="rightcol">
        <img src="https://glsmyth.files.wordpress.com/2014/07/a-space-in-time.jpg" alt="Homepage image" />
    </div>
</body>
</html>

No more floats, min-width set on the .leftcol and only max-width on the image.

Upvotes: 1

Related Questions