html - CSS:如果图像宽度比页面窄，则将图像宽度限制为页面宽度的一半

Question

我有一个图像漂浮在一些文本的左边:

<style>
  img {
    float: left;
  }
</style>
<div>
  <img src="anything.jpg">
  <p>Lots of text.
</div>

图像可以有任何尺寸。我想仅使用 CSS 在所有外形规范中执行以下操作:

• 如果图像至少与页面一样宽，则将其全宽显示(宽度:100%)；和
• 如果图片比页面窄，请将其宽度限制为最大页面宽度的一半(最大宽度:50%)。

这可能吗？

编辑

好吧，不可能是我所担心的，但我真的希望我只是错过了一些东西。

我无法动态创建 CSS 规则/媒体查询，所有内容都是静态的(实际上没有服务器)。

我想知道是否存在足够好的拼凑:根据图像的大小向图像添加一个类(例如，.img-500 用于宽度为 500px 到 599px 的图像，.img-600 用于 600px 到 699px ....)，并基于这些使用媒体查询:

@media (min-width: 501px) {
  .img-500 {
    max-width: 50%;
  }
}

有兴趣听听是否有人尝试过这种方法，或者知道这种方法注定失败的原因吗？

Answer 1

就我而言，宽度条件不能只用 CSS 完成。但是，您可以使用两个类，一个为 width: 50%，另一个为 width: 100% 并在需要时使用 JavaScript 在它们之间切换:

$(document).ready(function() {
    $("#image1").load(function() {
        if($(this).width() < $(window).width()){
            $(this).addClass("width50");
        }else{
            $(this).addClass("width100");
        } 
    });
});