0

All my images should be responsive so i defined image width 100%. But most of the pictures are getting too big on a bigger screen than the iPhone. These images don't need to have full height so i want them to be stripes.

koolguy
  • 96
  • 6

1 Answers1

0

What you seem to be looking for are css media queries.

As an example:

img {width: 50%;}

@media only screen
and (max-device-width : 767px)
{
img {width: 100%;}
}

This will make your images 50% width on a desktop, but on a mobile device with a screen of 767px or less the images will be 100% width.

Separatrix
  • 272
  • 2
  • 9
  • I tried media query and clip before but i dont get stripe like images. What about the height in your code? – koolguy Jun 15 '16 at 08:02
  • @koolguy You can use the method defined here: http://stackoverflow.com/questions/493296/css-display-an-image-resized-and-cropped to set up the image as you want it for desktop, then override that for the mobile view. – Separatrix Jun 15 '16 at 08:08