Wyśrodkowany img jako odsyłacz do strony

Question

Witam, moim zadaniem jest stworzyć coś na styl bloga. Każdy kolejny artykuł jeden pod drugim, w tym wypadku odsyłaczem do każdego artykułu jest zdjęcie. Stosując zasadę mobile first, wszystko jest responsywne i dobrze skalowane. Problem zaczyna się w momencie powiększania strony obrazy osiągają swoje max-width 100% i wyrównują do lewej. Ustawiam display img: block i margin: 0 auto. Wszystko ładnie się centruje ale odsyłaczem nie jest już tylko img tylko cała szerokość strony wysokości zdjęcia. A ja chcę żeby odsyłaczem był tylko img.

<article>
      <a href="">
        <img src="4.jpg" alt="obraz1"></a>
        <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
        ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.</p>
    </article>

img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

 

Answer 1

https://codepen.io/arces92/pen/ddwgPY

Comments

Masz tam wersję z flexboxem i bez flexa. Wg mnie jednak lepiej skorzystać z czegoś nowszego i zaznajomić się z flexem.