0

I browsed here and everywhere, all day, but I can not figure it out. I will show in images, instead of a long explanation. I am using Bootstrap 3. I want a responsive image, to show like this in desktop and all other modes and the image to scale:

first image

But on mobile, instead of scaling it, to show a part of it.

second image

Gerard Reches
  • 3,048
  • 3
  • 28
  • 39
the.matrix
  • 43
  • 7

4 Answers4

0

Use this property to your image

    img 
   {
    max-width:100%;
   }

This would works. Scales image on responsive

Prasath V
  • 1,336
  • 4
  • 20
  • 39
  • Thank you, I am using the class img-responsive, but how to make it not responsive on mobile only, but centered instead or showing just a part of it? – the.matrix Nov 18 '16 at 14:33
0

Add img-responsive to your img tag like this

<img class="img-responsive" src="your/img/src">
bashante
  • 13
  • 1
  • 4
0

I'm setting the image to cover the entire screen by using background-size: cover; and then just replacing the background-image using @media with bootstraps xs viewport size. I've just used the images you have shown.

HTML

<div id="myid" class="img">
</div>

CSS

#myid {
  height:100vh;
  width:100%;
  background-size:cover;
  background-image: url("https://i.stack.imgur.com/WPTL6.jpg");
  background-repeat: no-repeat;
}
@media(max-width:767px){
  #myid {
  height:100vh;
  width:100%;
  background-size:cover;
  background-image: url("https://i.stack.imgur.com/EG1CV.jpg");
  background-repeat: no-repeat;
  }

Take a look at this jsfiddle.

https://jsfiddle.net/DTcHh/27113/

It's a little dirty as things can become 'pixilated' with lower quality images but should do the trick.

A1raa
  • 605
  • 1
  • 7
  • 22
  • Thank you very much! I just checked it. The chalenge here is that when it is on mobile, instead of scaling, it should show the center of the image not scaled. Even if photos are not responsive and we start to scale the screen, it always show the left part of the image and the right disappears. But how instead to center the image and left and right part equally to disappear? – the.matrix Nov 18 '16 at 16:36
  • @the.matrix You could give the image something like `background-position: center, center;` when inside the `xs` viewport range. This will position the img both vertically and horizontally. – A1raa Nov 18 '16 at 23:17
0
  1. wrap your image in a div with a class like .thumbnail
  2. On mobile remove the img-responsive class from the image - here is a tutorial I wrote showing how to target javascript on a given breakpoint.
  3. Then look at this answer on how to crop an image with a wrapper div How to automatically crop and center an image
  4. Save the princess
Community
  • 1
  • 1
JacobLett
  • 427
  • 6
  • 18