i already try to make this responsive like this: https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2, i want it like shrink like an image, whatever screen in it, it will match in the position, imagine i put in every box image, but seems fail. https://jsfiddle.net/hnrfhyag/20/


To get responsiveness similar to the image link you gave, you need to set width=100% and height=auto for the image.

In your jsfiddle example, you did the width part okay (defined it as a % of available space) but you are fixing the height - both for the outer box as well as the inner boxes. So no matter what you do, the height will stay the same. That will give distorted images when scaled.

So if you want responsively scaled images,

  • Define one of the two (height or width) as a % of available space (you did this right)
  • Define the other as auto - so that it scales properly
  • Adjust the rest of the design to suit (so that other elements don't walk out of your layout).
  • i did as you say, still, jsfiddle.net/hnrfhyag/31 , can you show me an example in my case, i can't figure it out – mas bro Aug 22 '17 at 5:54
  • Take a look at jsfiddle.net/2q10p1kh I removed the height attribute from the img tag as well as the CSS class wrapperatas. Forcing the height interferes with image scaling as well as the container scaling. – Sas3 Aug 22 '17 at 11:23
  • As I said, after you fix the scaling, you need to adjust the design to suit your needs. I don't know what you have in mind regarding layout - so I just fixed the image scaling to be proportional at any resolution. Since the image is horizontal (width much more than height), it will not display well on phones / narrow portrait displays. But that's a content issue, not your layout issue. Choose a different (portrait mode) image, and that will go away. – Sas3 Aug 22 '17 at 11:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.