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

Posted 2023-03-14

【中文标题】是否可以为 CSS 样式执行 if else ？ [复制]

【英文标题】：Is it possible to do an if else for CSS styles? [duplicate]

【发布时间】：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 准备的。

【参考方案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