WordPress.org

1. davidismyfriend
   Member
   Posted 4 months ago #

   Hello everyone,
   I am trying to have the pictures in my blog resize according to the screen resolution of the visitors.
   I would like to keep it as it is for a screen height of 1000 and more.
   But for less then 1000 I would want the pictures to be 700 in width.

   http://news.davidshama.com

   So I thought of using multiple css...
   How can I script this in my header, I know there is a javascript for html to call different css:

   <script type="text/javascript">
   if(screen.width<=1000)
   {
   document.write("<link rel='stylesheet' type='text/css' href='style_1000.css' />");
   }
   if(screen.width>1000)
   {
   document.write("<link rel='stylesheet' type='text/css' href='style.css' />");
   }
   </script>

   But I don't know how to do that in PHP in my header

   Or maybe there is a plugin that allows the resizing of pictures according to screen resolution, that would be great.
   Please help

2. ryanve
   Member
   Posted 4 months ago #

   You'd don't want to do it like that. Use media queries.

   <link rel="stylesheet" media="all and (max-device-width:1000px)" href="small.css" />
   <link rel="stylesheet" media="all and (min-device-width:1001px)" href="large.css" />

   Or (better) just make one stylesheet and use media queries in it:

   /* Put base styles here for below 1000px */
   
   /* Then use media query for devices above 1000px */
   @media all and (min-device-width:1001px) {
   
       /* styles here */
   
   }

   Are you referring to CSS background images or images in an img tag? You can make images resizable in CSS by using max-width:100%; height:auto; See this.

3. davidismyfriend
   Member
   Posted 4 months ago #

   Thanks ryanve,
   the single stylesheet solution seems to be the best, I'll try this
   I am referring to images in posts so yes the img tag I guess, I am new to this..
   I would really appreciate if you take a look to my css and help me a little to implement the media queries in it.

4. davidismyfriend
   Member
   Posted 4 months ago #

   Ok I did it! with the two additional media queries,

   the sizes correspond to the height of the screen:
   From 0 to 870px : images are at 60% of their full size
   From 871 to 1180px: images are 75%
   From 1181 to more: 100%
   Of course I also had to completely modify the stylesheets for each size, but it works great now.
   if you change your screen res you'll see it change

   Thanks again Ryanve

5. davidismyfriend
   Member
   Posted 4 months ago #

   img {zoom:x%} doesn't work in firefox apparently, I am trying with -moz-transform but it does't work the same way...
   That's a huge problem
   how can I do a media query targeting only firefox for a separate stylesheet?

   something like this?
   <link rel="stylesheet" media="only (-moz)" href="style.css" />

Reply

You must log in to post.