CSS：限制图像宽度的一半页面宽度，如果它比

页面

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

很想听到，如果有人已经尝试过，或者说方法注定的原因，谁知道呢？

来源

2017-04-04 Jackson Pauls

不无JavaScript的 –

calculte其宽度相应的视口使用jQuery winow的宽度和应用规则。 –

_“那可能吗？”_ - 不，那是不可能的。 CSS无法“检查”条件“图像的宽度至少与页面一样宽。”//我会读取服务器端的图像尺寸，然后动态创建适当的CSS规则/媒体查询。 – CBroe

就我而言，宽度的条件不能用CSS来完成。然而，你可以使用两个类一个与width: 50%和其他width: 100% &使用JavaScript来在需要的时候它们之间进行切换：

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

来源

2017-04-04 10:43:25

谢谢，但我试图用CSS来做到这一点。 –

CSS：限制图像宽度的一半页面宽度，如果它比

回答

相关问题