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

mikail · Sep 14, 2021

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

.h {
width: 200px;
border-radius: 20px;
justify-content: center;
align-items: center;
border:solid black;
text-align: center;
background-color: black;
display: flex;
}
</style>

BigDady · Sep 14, 2021

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>

Help with my responsive home page	2	Dec 14, 2022
Image on header	2	May 2, 2024
Help with code	0	Jun 12, 2022
How do I fix this issue in sqaurespace code block?	1	Jul 2, 2024
Centering a button using flexbox	2	Feb 5, 2023
Please Help?	0	Jul 23, 2022
How to position the tooltip comment on these buttons?	9	Nov 4, 2023
When draggable=false & draggable=true dont work ?	1	Jan 14, 2023

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

mikail

BigDady

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads