Question 45516 in CSS Question posted in
Some basic documentation can be found here.

Cannot scale float right image when making browser smaller – CSS

I have some text and an image floating to the right that looks like this :

enter image description here

The HTML looks like this :

  <body>
    <div id="container">
      <div id="img"/>
      <p>
      What is Lorem Ipsum?..... etc
      </p>
    </div>
  </body>

and the CSS that is placing the image looks like this :

#img {
  background-image: url('http://www.w3.org/2008/site/images/logo-w3c-screen-lg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  height: 140px;
  width: 250px;
  float: right;
}

When I make the screen smaller I would like the image to scale as well. I dont want it squeezing the text on the left. If I make the screen smaller then this is what it looks like :

enter image description here

So I try and use percentages instead of absolute values.

Unfortunately if I use percentages in my CSS I get nothing. See below :

#img {
  background-image: url('http://www.w3.org/2008/site/images/logo-w3c-screen-lg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  height: 30%;
  min-height: 30%;
  width: 30%;
  min-width: 30%;
  float: right;
}

enter image description here

How do I get my image to scale properly when I resize my browser?

playcode URL

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for everyones tips.

    I found my own way of solving this by using viewport width and aspect ratio.

    If I specify the width as always being a percentage of the screen width (vw) then the image will proportionally resize when making the screen smaller.

    You need to define some kind of height as well, but if you use vh, or some other kind of height attribute then you get weird results. If you use aspect-ratio 2/1 or whatever the dimensions of the image are, then that takes care of height and preserves the ratio.

    #img {
  background-image: url('http://www.w3.org/2008/site/images/logo-w3c-screen-lg');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: top;
  min-width: 30vw;
  aspect-ratio: 2 / 1;

}

    https://playcode.io/1141029


  2. 0

    If you set the height and width with percentages and the min values with pixels it works just fine.

      height: 30%;
  min-height: 300px;
  width: 30%;
  min-width: 150px;

    Not sure if this is how you wanted it to be

    playcode

    Login or Signup to reply.
  3. 0

    I just updated your sample like this

    html:

     img {
    float: right;
    margin: 5px;
    width: 40%;
    min-width: 40%;
  }

  p {
    text-align: justify;
    font-size: 16px;
  }
    <div class="container">
        <div>
          <img src=
    "http://www.w3.org/2008/site/images/logo-w3c-screen-lg"
            alt="Longtail boat in Thailand">
        </div>
          
    <p>
        Nunc pellentesque at sem ac sodales. Cras tellus ligula, pellentesque eget convallis nec, tincidunt et felis. Pellentesque nec magna pulvinar, rhoncus nisl nec, scelerisque ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vel nisi volutpat, accumsan orci et, pulvinar nunc. Nulla mi nibh, finibus a sollicitudin vitae, tincidunt a lectus. Aenean facilisis tincidunt tempus. Etiam vel lobortis sapien. Aliquam tempor eros ut mauris ultricies, vel mollis erat scelerisque. Mauris sit amet congue nulla. In pretium nibh vel massa feugiat, sit amet interdum dui bibendum. Donec molestie eros sem, eu pellentesque lectus sodales non. Integer sit amet sollicitudin ex. Maecenas interdum sapien in turpis convallis consequat. Sed ac mattis dolor.Nunc pellentesque at sem ac sodales. Cras tellus ligula, pellentesque eget convallis nec, tincidunt et felis. Pellentesque nec magna pulvinar, rhoncus nisl nec, scelerisque ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vel nisi volutpat, accumsan orci et, pulvinar nunc. Nulla mi nibh, finibus a sollicitudin vitae, tincidunt a lectus. Aenean facilisis tincidunt tempus. Etiam vel lobortis sapien. Aliquam tempor eros ut mauris ultricies, vel mollis erat scelerisque. Mauris sit amet congue nulla. In pretium nibh vel massa feugiat, sit amet interdum dui bibendum. Donec molestie eros sem, eu pellentesque lectus sodales non. Integer sit amet sollicitudin ex. Maecenas interdum sapien in turpis convallis consequat. Sed ac mattis dolor.
        </p>
      
      </div>

    playcode

    Login or Signup to reply.
  4. 0

    You could consider, making it a flex display on smaller devices, so that the text wraps after the image. Not sure, if this is what you’re looking for, but it might improve user experience for smaller devices, otherwise the image may become too small to view and the text difficult to read.

    Furthermore, this seems to be one of the valid use cases for the otherwise not outdated, but rather old fashioned layouts. I haven’t seen floats recently. I suppose I tend to stay away from them.

    Hope this helps.

    img {
  --smallest: 350px;
  float: right;
  margin: 5px;
  width: min(var(--smallest), 40%);
}

p {
  text-align: justify;
}

@media screen and (max-width: 700px) {
  .container {
    display: flex;
    flex-flow: column;
  }
  img {
    width: 70%;
  }
}
    <div class="container">
  <img src="http://www.w3.org/2008/site/images/logo-w3c-screen-lg" alt="Longtail boat in Thailand">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. At explicabo quis officia animi culpa, dolorem, rem omnis possimus soluta dolorum delectus! Alias assumenda laboriosam hic! Dignissimos porro explicabo debitis blanditiis? Lorem ipsum dolor, sit
    amet consectetur adipisicing elit. Eum quos dolorum ullam! Voluptas architecto quia, error possimus officia magni illo laudantium, voluptatibus harum tempora quas quisquam corporis aperiam ullam aut! Lorem ipsum dolor, sit amet consectetur adipisicing
    elit. Culpa quibusdam rerum, iure ut ipsa soluta ipsam optio voluptatibus quis quasi facere neque, quam odio, eaque inventore vero est? Molestias, quia! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum sapiente ex temporibus quasi
    modi inventore corrupti molestiae, placeat culpa incidunt, repudiandae iste tempora maiores sit ab fuga sequi, laudantium commodi. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime beatae voluptatum iure quis odit itaque quaerat natus.
    Labore incidunt minima exercitationem impedit ipsam, porro reprehenderit cupiditate illum deleniti dicta ea?
  </p>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search