Is it possible to do an if else for CSS styles?

Question

Doing this to auto resize images on my page.

What I want to do is:

For images with 320px width, set width to 50%.
For images with other width, set width to 100%.

Is it possible to do it in the CSS?

Currently I am only able to set width to always 100%.

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

Why you cant do it in HTML level, rather than using css to set the image width? — Chamika Sandamal, Sep 15 '14 at 05:34
@ChamikaSandamalHmm like using javascript or jquery? I tried this: But it didn't work. — JqueryNewbie, Sep 15 '14 at 05:36
assign class or id to element containing image then change their width. — Surinder ツ, Sep 15 '14 at 05:37
@Surinderツ It's mainly in html. I don't have any php codes. — JqueryNewbie, Sep 15 '14 at 05:49
If you're using only HTML you should modify it and add a corresponding class for each image group and then edit their styles in CSS, this is the recommended way to deal with your problem. If you want to use javascript instead, you can use one of these scripts: [using js and css](http://jsfiddle.net/fssvf0q8/2/) or [using only js](http://jsfiddle.net/fssvf0q8/1/) — Alex Guerrero, Sep 15 '14 at 07:14

score 0 · Answer 1 · answered Sep 15 '14 at 05:36

0

you can do this only by setting 2 classes for each type like

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

answered Sep 15 '14 at 05:36

himanshu

1,732
1
11
12

score 0 · Answer 2 · answered Sep 15 '14 at 05:40

0

Actually, you can, but it is not recommended. If you really need to put if/else logic in the css file, you can set the apache/nginx to execute this particular css file as a php file. Then you can use the usual php syntax, just don't forget to set the appropriate headers.

answered Sep 15 '14 at 05:40

mariobgr

2,143
2
16
31

So you can't with CSS, you can with PHP ;) – Menno Sep 15 '14 at 05:47

Hamix · Answer 3 · 2014-09-15T06:27:48.017

0

It is better use of jQuery. Create class for images

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

and use $.resize()

Like

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

Update 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

edited Sep 15 '14 at 06:27

answered Sep 15 '14 at 05:51

Hamix

1,323
7
18

tried but it didn't work. What I want to do is to change image size depending on the width of the uploaded image. Is that possible? – JqueryNewbie Sep 15 '14 at 06:02
you must resize window to see changes.create fiddle for better help to you. – Hamix Sep 15 '14 at 06:04
See my ``Update 1`` in answer. – Hamix Sep 15 '14 at 06:28
( width < 320) is window width or img width? – JqueryNewbie Sep 15 '14 at 06:39
Variable ``width`` store current window width. ``( width < 320)`` is window width. – Hamix Sep 15 '14 at 06:44

DracSkywalker · Answer 4 · 2014-09-15T07:06:14.273

It is not possible in css. but you can use @media rules to do this @media screen is used for computer screen and @media handheld is for small or handheld devices. like

  @media screen
   {
     width: 100%;
   }

and

     @media handheld
    {
      width: 50%;
    }

or you can use bootstrap to make image responsive which will adjust image when resizing by downloading bootstrap from www.getbootstrap.com or by the cdn

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

and then add class "img-responsive" to img tag. it will adjust the height and width of the image.. if you want fixed heght you must specify the height of the image using another class or style property

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

Another method is to use javascript Browser Object Model

  screen.width

and applying conditonal statements. I think it is better to use javascript

score -2 · Answer 5 · answered Sep 15 '14 at 05:36

-2

CSS itself does not provide a conditional capability. LESS and SASS are CSS pre-processors that will do what you are looking for. I believe both will allow Javascript as well, so you can do most anything you want.

answered Sep 15 '14 at 05:36

Chris Barlow

466
4
8

1

CSS preprocessoes do accept if/else arguments but they are unable to apply this conditional logic based on native image sizes. – Terry Sep 15 '14 at 05:45

Is it possible to do an if else for CSS styles?

5 Answers5

DEMO