Question

我的图片浮动到某些文字的左侧：

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

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

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

这可能吗？

修改

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

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

我想知道是否有一个好的足够的kludge：根据图像的大小为图像添加一个类（例如，对于宽度为500px到599px的图像，为.img-500 ,. img -600 for 600px to 699px ....），并使用基于以下内容的媒体查询：

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

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

Answer 1

就我而言，宽度上的条件只能用CSS完成。但是，您可以使用两个类别width: 50%和另一个width: 100%＆amp;在需要时使用JavaScript在它们之间切换：

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

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

1 个答案: