css 缩小浏览器时无法缩放浮动右侧图像

6yoyoihd 于 2023-02-06 发布在其他

关注(0)|答案(4)|浏览(163)

我有一些文本和一个图像浮动到右边，看起来像这样：

HTML看起来像这样：

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

放置图像的CSS如下所示：

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

当我缩小屏幕时，我希望图像也能缩放。我不希望它挤压左边的文本。如果我缩小屏幕，那么它看起来会是这样的：

所以我试着用百分比来代替绝对值。
不幸的是，如果我在CSS中使用百分比，我什么也得不到。

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

当我调整浏览器大小时，如何让我的图像正确缩放？
playcode URL

css

来源：https://stackoverflow.com/questions/75335237/cannot-scale-float-right-image-when-making-browser-smaller

4条答案

按热度按时间

e0uiprwp1#

如果你用百分比设置高度和宽度，用像素设置最小值，它就能正常工作。

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

不知道这是不是你想要的
playcode

赞(0）回复(0）举报 2023-02-06

ut6juiuv2#

我刚刚更新了你的样本
网页：

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

赞(0）回复(0）举报 2023-02-06

gcmastyq3#

你可以考虑在小型设备上使用柔性显示屏，这样文本就可以在图像后换行。不确定这是否是你想要的，但它可能会改善小型设备的用户体验，否则图像可能会变得太小而无法查看，文本也很难阅读。
此外，这似乎是一个有效的用例，否则不过时，但相当老式的布局。我没有看到浮动最近。我想我倾向于远离他们。
希望这个有用。

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>

赞(0）回复(0）举报 2023-02-06

vshtjzan4#

谢谢大家的建议。
我找到了自己的方法来解决这个问题，通过使用视口宽度和纵横比。
如果我将宽度指定为屏幕宽度的百分比（vw），那么当屏幕变小时，图像将按比例调整大小。
你还需要定义某种类型的高度，但是如果你使用vh，或者其他类型的height属性，那么你会得到奇怪的结果。如果你使用aspect-ratio2/1或者任何图像的尺寸，那么它会照顾到高度并保持比例。

#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

赞(0）回复(0）举报 2023-02-06

我来回答

css 缩小浏览器时无法缩放浮动右侧图像

4条答案

相关问题

热门标签

最新问答