Cannot scale float right image when making browser smaller-CodePudding

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

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 :

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

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

playcode URL

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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