How to make image responsive

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Why when I do this:

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

The image is not responsive
But is responsive when I do this:

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

Your code so far

HTML
<div id="main">
  <h1 id="title">Dr. A.P.J Abdul Kalam</h1>
  <p>The Man who continues to Inspire me even after his demise</p>
  <div id="img-div">
    <img src="https://upload.wikimedia.org/wikipedia/commons/d/d6/Vladimir_Putin_with_Abdul_Kalam_26_January_2007.jpg" id="image" alt="Kalam along with Vladimir Putin and Manmohan Singh during his presidency">
    <figcaption id="img-caption">Kalam along with Vladimir Putin and Manmohan Singh during his presidency</figcaption>
  </div>
  <div id="tribute-info">Some Facts About This Eminent Personality
  <ul>
    <li>Avul Pakir Jainulabdeen Abdul Kalam was an Indian aerospace scientist who served as the 11th president of India from 2002 to 2007</li>
    <li>He was born and raised in Rameswaram, Tamil Nadu & studied physics and aerospace engineering.</li>        
    <li>He spent the next four decades as a scientist & science administrator, mainly at the DRDO and ISRO & was intimately involved in India's civilian space programme & military missile development efforts.</li>
    <li>He thus came to be known as the Missile Man of India for his work on the development of ballistic missile and launch vehicle technology.</li>
    <li> He also played a pivotal organisational, technical, & political role in India's Pokhran-II nuclear tests in 1998, the first since the original nuclear test by India in 1974.</li>
    <li>Kalam was elected as the 11th president of India in 2002 with the support of both the ruling BJP & the then-opposition INC.</li>
    <li>Widely referred to as the "People's President", he returned to his civilian life of education, writing & public service after a single term. </li>
    <li> He was a recipient of several prestigious awards, including the Bharat Ratna, India's highest civilian honour.</li>
    <li>While delivering a lecture at the IIM Shillong, Kalam collapsed & died from an apparent cardiac arrest on 27 July 2015, aged 83.</li>
    <li>Thousands, including national-level dignitaries, attended the funeral ceremony held in his hometown of Rameswaram, where he was buried with full state honours.</li>
  </ul>
    <p>"Never give up on your dreams, no matter how old you are, no matter where you are today. Do not give up on your dreams for better tommorow"</p>
    <p>--Dr. A.P.J Abdul Kalam</p>
    <p>If you have time, you should read more about this incredible human being on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam" target="_blank">Wikipedia Entry</a></p>
  </div>
</div>

CSS
body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36

Challenge: Build a Tribute Page

Link to the challenge:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

ok…i will do that from now.

4

Could you give us a link to your codepen (or wherever you are hosting your page) so we can play with it and run the tests for ourselves?

5
6

Thanks.

When I remove margin: 0 auto; from the img then the second layout test doesn’t pass. This test isn’t really about responsiveness but more just a requirement that the image be centered. Using auto side margins is one way to center an element and thus that’s why you need it to pass this particular test.

7

They are also two different tests so I don’t really see an issue. The first layout test is for responsiveness and the second is for centering.

8

i was confused as it already centered using text-align property of css

9

I’m not seeing this. When I remove margin: 0 auto from the img it is not centered any more but rather left justified.

10

Technically, if you make the viewport narrow enough the image will be centered (and the test will pass as well).

You can center using text-align: center on the parent of the image but you would also have to set the image to display: inline-block

11

maybe mistake from my side. Anyways, Thanks bbsmooth :facepunch:

12

understood. Thanks for your time Lasse :v: