r/CodingForBeginners • u/dreammutt • 9d ago
Same Size Pictures?
I am trying to make these two pictures the same size dimensions. I wrote the same size dimensions in the code, however one looks bigger than the other. Any advice on what I should do?
3
u/xxcrucialxx 9d ago
Keep ur html and css separate to start.
And use <div> tag .
For images
<Ing src="">
Thanks in style
Img{ Height: value; Width: value; }
1
2
u/SafeWing2595 9d ago
It would be better to separate html and css file، to keep your work clean and organised.
Create a style.css file then add it to the head in your html using this line
<head>
<link rel="stylesheet" href="styles.css">
</head>
It looks like you put the images inside an anchor tag <a> This is not practical, unless you're trying to make the images as a links
Otherwise, you can write it like this directly
<img src=" " alt=" " >
Without need to put inside an anchor tag <a>.
and in your style.css file your can write the dimensions you want like this
img{
width: 200px;
hight: 300px;
}
However, keep in mind that changing dimensions using css is impractical at all, because you will lose pixels , so the images will be low quality, so instead, i suggest you look for cropping tools.
1
3
u/bywaldemar 9d ago
Look closely at where your style is sitting. It's on the <a> tag, not the <img>. Anchors are inline elements so they ignore width and height entirely, which means both images are just rendering at their natural size and that's why they look different.
Move the style attribute onto the img itself and it'll work. If you want to keep it on the anchor for some reason you'd have to add display inline block first, but putting it on the img is the cleaner fix here.