CSS - Responsive Image

HTML-CSS
1

Tell us what’s happening:
I cannot figure out how to make my image responsive and feel like I’ve added a whole bunch of superfluous code.

Your code so far

div { text-align: center; } 
       .center {

display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
body {

background-color: #c0392b;
margin: 20%;
}

#title {
text-align: center;
font-family: georgia, sans-serif;
font-size: 60px;
background-color: #ffc300;
padding: 20px 0px 20px 0px;
}

#subtitle {
text-align: center;
font-size: 35px;
background-color: #ffc300;
padding: 10px 0px 10px 0px;
}

#img-div {
display: block;
max-width: 100%;
height: auto;
}

#img-caption {
display: center;
font-size: 17px;
font-family: Georgia;
color: #fdf2e9;
text-align: center;
}

div#tribute-info {
background-color: #FDF2E9;
font-family: Georgia;
padding: 25px 25px;
margin: 11px;
margin-top: 50px;
}

h1.title-APJ {
font-size: 35px;
color: black;
text-align: center;
padding: 20px 0px 20px 0px;
background-color: #ffc300;
}

#tribute-link {
text-decoration: none;
color: #fdf2e9;
}

#dev-link {
color: #fdf2e9;
}

<h1 id="title">
  Apo Whang-od
</h1>
<h2 id="subtitle">
  The Last Mambabatok
</h2>
<div id="img-div">

  <img src="http://philnews.ph/wp-content/uploads/2017/11/Apo-Whang-Od-Tattoo.jpg" alt="Portrait of Whang-Od Oggay" id="image" class="center">

  <div id="img-caption">
    <br> For the Indigenous peoples of the Philippines, traditional tattoo is a physical expression of their soul story.
  </div>
</div>

<div id="tribute-info">

  <!--Achievements and other
            details of the person-->
  <h1 class="title-APJ">
    About the Artist
  </h1>

  <p>

  <ul>
    <li>Whang-Od Oggay, born Maria Oggay, was born into the Butbut tribe of Buscalan Proper in Tinglayan, Kalinga on the Philippine Islands.</li>
    <br>
    <li> At the age of 15, Whang-Od began practicing the art of <i>batok</i>, Filipino traditional and tribal tattoo using bamboo sticks and thorns from the calamansi tree.</li>
    <br>
    <li>
  </ul>
  </p>

</div>
<br>
For more information,
check out
<a id="tribute-link" href="https://theculturetrip.com/asia/philippines/articles/meet-apo-whang-od-the-last-hand-poke-tattoo-artist-in-the-philippines" target="_blank">
  <i>Meet Apo Whang-Od</i> on CultureTrip. </a>
Created by <a id="dev-link" href="https://github.com/joboadobo">
  JoBo Adobo</a>.

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

2

Hi add this code img { max-width: 100%; height: auto; }
for responsively resize img

and do not forget add an element with id="main" , which contains all other elements.

3

Oh gosh! Thanks so, so much - that did it! Is it that I need to add:

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

Because the id=“img” is a separate and distinct element from id=“img-div”? Which makes sense. Can you tell me what the id=“img-div” is responsible for and why it is needed?

4

I think used just for wrap the image and its caption in a group and it is better use figure element because your html code is readable.

<figure>
  <img src=".....">
  <figcaption >.......</figcaption>
</figure>
1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.