CSS：如果图像宽度比页面窄，则将图像宽度限制为页面宽度的一半答案

【问题标题】：CSS: limit image width to half page width if it's narrower than the pageCSS：如果图像宽度比页面窄，则将图像宽度限制为页面宽度的一半
【发布时间】：2017-08-29 11:39:06
【问题描述】：

我有一张图片漂浮在一些文字的左边：

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

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

如果图像至少与页面一样宽，则显示全宽（宽度：100%）；和
如果图像比页面窄，则将其宽度限制为最大页面宽度的一半（最大宽度：50%）。

这可能吗？

编辑

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

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

我想知道是否可能有一个足够好的 kludge：根据图像的大小为图像添加一个类（例如 .img-500 用于宽度为 500px 到 599px 的图像，.img-600 用于 600px 到 699px 的图像....)，并使用基于这些的媒体查询：

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

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

【问题讨论】：

不是没有 JavaScript
用jquery计算其宽度与window的视口宽度并应用规则。
“这可能吗？” – 不，这是不可能的。 CSS 无法“检查”条件“图像是否至少与页面一样宽”。 // 我会在服务器端读取图像尺寸，然后动态创建适当的 CSS 规则/媒体查询。
似乎根据屏幕方向、宽度和高度限制图像（无论大小）可能会更好。媒体查询可以帮助解决这个问题。

标签： html css

【解决方案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");
        } 
    });
});

【讨论】：

谢谢，但我正在尝试只使用 CSS。