Please help,i dont know why the image doesnt follow the image rules


Ad

Advertisements

Joined
Nov 13, 2020
Messages
72
Reaction score
13
Your biggest error is not giving dimensions to the image. The next is styling the anchor and not the image or the div. Also the use of display:flex - not needed.

I changed the class from <a> to <div>
Added a width to the border and changed the color so it's visible.Did the same for background-color.
Remove flex and all components that are not needed to center the image.
Made the image smaller so you can see it's in the div.
Code:
<style>
  img{
   width: 180px;
  }
.h {
  width: 200px;
  border-radius: 20px;
  border: 2px solid red;
  text-align: center;
  background-color: green;
}
</style>
</head>

<body>
<div class="h">
  <a href="#bread" >
    <img src="https://i.ibb.co/PZL8cLw/Whats-App-Image-2021-09-14-at-11-18-01-AM.jpg"/>
  </a>
</div>

BUT
This can be done simpler.
Code:
img {
  border-radius: 18px;
}
</style>
</head>
<body>

<a href="#bread" >
    <img width="300" height="300" src="https://i.ibb.co/PZL8cLw/Whats-App-Image-2021-09-14-at-11-18-01-AM.jpg"/>
</a>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top