是否可以为 CSS 样式执行 if else ？ [复制]答案

【问题标题】：Is it possible to do an if else for CSS styles? [duplicate]是否可以为 CSS 样式执行 if else ？ [复制]
【发布时间】：2014-11-08 14:01:12
【问题描述】：

这样做可以自动调整我页面上的图像大小。

我想做的是：

对于宽度为 320 像素的图片，将宽度设置为 50%。
对于带有其他宽度，将宽度设置为 100%。

可以在 CSS 中实现吗？

目前我只能将宽度设置为始终 100%。

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

【问题讨论】：

为什么不能在 HTML 级别，而不是使用 css 设置图像宽度？
@ChamikaSandamalHmm 喜欢使用 javascript 或 jquery？我试过这个：
将类或id分配给包含图像的元素，然后改变它们的宽度。
您使用的是哪种编程语言？
@Surinderツ这实际上是为我的wordpress 准备的。

标签： html css responsive-design

【解决方案1】：

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

【讨论】：

CSS 预处理器确实接受 if/else 参数，但它们无法根据原生图像大小应用此条件逻辑。

【解决方案2】：

你只能通过为每种类型设置 2 个类来做到这一点

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

【讨论】：

【解决方案3】：

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

【讨论】：

所以你不能用 CSS，你可以用 PHP ;)

【解决方案4】：

最好用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

【讨论】：

试过了，但没用。我想要做的是根据上传图像的宽度更改图像大小。这可能吗？
您必须调整窗口大小才能看到更改。创建小提琴以获得更好的帮助。
查看我的Update 1 回答。
(width
变量width存储当前窗口宽度。 ( width < 320) 是窗口宽度。

【解决方案5】：

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

  @media screen
   {
     width: 100%;
   }

和

     @media handheld
    {
      width: 50%;
    }

或者您可以使用 bootstrap 使图像响应，通过从 www.getbootstrap.com 或 cdn 下载 bootstrap 调整图像大小时调整图像

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

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

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

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

  screen.width

并应用条件语句。我认为最好使用javascript

【讨论】：