Question

执行此操作以自动调整页面上的图像大小。

我想做的是：

对于宽度为320像素的图像，请将宽度设置为50％。
用于其他图像宽度，设置宽度为100％。

是否可以在CSS中执行此操作？

目前我只能将宽度设置为100％。

.entry-content img{
width: 100% !important;
}

Answer 1

您只能通过为每种类型设置2个类来完成此操作，例如

.width320 { width:50%;}
.width_other{ width:100%;}

Answer 2

实际上，你可以，但不推荐。如果你真的需要将if / else逻辑放在css文件中，你可以设置apache / nginx来执行这个特定的css文件作为php文件。然后你可以使用通常的php语法，只是不要忘记设置适当的标题。

Answer 3

最好使用jQuery。为图像创建类

.entry-content img{
   width: 100% !important;
}

并使用$.resize()

喜欢

$( window ).resize(function() {
     if($( window ).width() == 320)
        $( "img" ).addClass( "entry-content" );
});

更新1：

<强> HTML

<div id="main-content" >
    <img  src="http://oi45.tinypic.com/2u8hyjo.jpg"/>
    <img  src="http://oi47.tinypic.com/250teeh.jpg"/>    
</div>
<span class="size"></span>

<强> CSS

.width50{
    width: 50% !important;  
}
.width100{
    width: 100% !important;
}

<强> JQuery的

$(window).on('resize', function(){
    var box = $(this);        
    var width = box.width();
    var height = box.height();    
    if ( width < 320) {
        $("img").each(function(){
            if($(this).width<400)
                $(this).addClass("width50");
            else
                $(this).addClass("width100");        
        });
    } else {
        $("img").removeClass("width50 width100");
    }          
    $('.size').html(width+'x'+height);
}).trigger('resize');

DEMO

Answer 4

在CSS中是不可能的。但您可以使用@media规则来执行此操作 @media屏幕用于电脑屏幕和 @media掌机适用于小型或手持设备。像

  @media screen
   {
     width: 100%;
   }

和

     @media handheld
    {
      width: 50%;
    }

或者你可以使用bootstrap来使图像响应，当调整大小时通过从www.getbootstrap.com或cdn下载引导程序来调整图像

       //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

然后将类“img-responsive”添加到img标记。它将调整图像的高度和宽度..如果你想要固定的高度，你必须使用另一个类或样式属性指定图像的高度

 <img src="" style="height:100px;">

另一种方法是使用javascript浏览器对象模型

  screen.width

并应用条件陈述。我认为最好使用javascript

Answer 5

CSS本身不提供条件功能。 LESS和SASS是CSS预处理器，可以满足您的需求。我相信两者都会允许Javascript，所以你可以做任何你想做的事情。

是否可以为CSS样式执行if else？

5 个答案:

DEMO