How do I make my images responsive?

Question

I can't make my featured images responsive despite internet advice about max-width:100% or auto.

My site is vladmakeev.net

Tablets and phones are shown cropped image. I want full image, what to do?

I made changes that I saw in answer, and my image became proper sized, but it is center on the outside and I can't place in in the middle. After changes

What should I do next?

Possible duplicate of [Responsive Images with CSS](https://stackoverflow.com/questions/11736363/responsive-images-with-css) — Nico Haase, Feb 24 '18 at 10:11

score 0 · Answer 1 · answered Feb 24 '18 at 10:31

0

make your images css "width:100%" instead of "max-width: 100%"

answered Feb 24 '18 at 10:31

dy_

2,433
24
27

Tried, nothing changed. – Vladislav Makeev Feb 24 '18 at 10:34

score 0 · Answer 2 · answered Feb 24 '18 at 10:32

0

to make an image responsive, you must do this:

img {
      max-width: 100%;
      height: auto;
    }

if you are using bootstrap:
for bootstrap 3: add .img-responsive to your image.
for bootstrap 4: add .img-fluid to your image.

hope it help :)

answered Feb 24 '18 at 10:32

Mohandes

452
3
15

Tried, nothing changed.You code made my site look as in very first picture. May be it is used in site, but I am not familiar with bootstrap. – Vladislav Makeev Feb 24 '18 at 10:35
https://vladmakeev.net/dieta-eto-legko-kak-derzhat-dietu-i-ne-sorvatsya Problem in mobile and tablet version of posts. Featured Images are cropped. – Vladislav Makeev Feb 24 '18 at 10:38
set the width: 100%; in both image and it's parent div – Mohandes Feb 24 '18 at 10:46
and also remove the *left* margin. – Mohandes Feb 24 '18 at 10:47
Thank you! Image is good. But one change left: there is huge gap between newly sized image and text that is cannot be fixed through height: auto. What to do? (I attached one more image in question to show you) – Vladislav Makeev Feb 24 '18 at 11:03

How do I make my images responsive?

2 Answers2