After resizing images one is still bigger than the other one. Why?

HTML-CSS
1

I’m doing this little “project” to practice what I’ve learned this far, but I’ve encountered one problem that no matter how much I search on the web, I just couldn’t find the solution.
image
As you can see, the second image is a little bigger than the first one, but as I said in the title, I just resized both of them.

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "Poppins";
    height: 100vh;
}
form {
    display: grid;
    place-items: center;
}
legend {
    text-align: center;
    font-weight: bold;
}
fieldset {
    padding: 10px;
    display: flex;
    gap: 10px;
}
.input-wrapper {
    display: flex;
    border: 1px solid black;
    border-radius: 10px;
}
.input-wrapper img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}
label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 3px solid transparent;
    transition: 0.10s;
}
label:hover {
    cursor: pointer;
}
input {
    appearance: none;
}
label:has(> input[type="radio"]:checked) {
    background-color: rgba(37, 171, 255, 0.099);
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Poppins:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>Account type</legend>
            <div class="input-wrapper">
                <label for="personla-account">
                    <img src="imgs/man.png">
                    <input type="radio" name="account-type" id="personla-account" checked>
                    Personal
                </label>
            </div>
            <div class="input-wrapper">
                <label for="business-account">
                    <img src="imgs/business.png">
                    <input type="radio" name="account-type" id="business-account">
                    Business
                </label>
            </div>
        </fieldset>
    </form>
</body>
</html>

What am I doing wrong here? Or what am I missing?

2

Image that you provided looks pretty much same here. Could you please explain it again?

3

Hello!

Are you talking about the overflow of the right image?

There must be something wrong with the image file.
I reproduced your code with two images of the same
dimensions and don’t get the overflow:

test

(Images are from one of my private projects :wink:)

4

Perhaps adding “contain” to the images can help!

5

Hey @johanlassore
May be I would suggest adding a reset on your images like so

img{
display:block;
width:100%;
}

It makes the image to always fit in its containing block
Happy coding

6

What I meant is the right image is a little larger than the one in the left (the right one is taking a little more space than the left one)

7

Yes! I’ll go search for other images and see if that work

8

I looked for other images, but it didn’t work (I made sure that both had the same size). I tried adding a width to the input-wrapper div, and I think I don’t know why the right image is bigger:

image
image1920×1080 277 KB

9

Did you find the solution yet? If not, then upload the image somewhere and post the link so that I can download and see what’s going wrong?

10

They are both exactly 200x200.

It is the actual images that are not the same. The left has more space on the sides. You can add a bit of padding to the right image but you have to remove the object-fit which will cause a bit of distortion, you wouldn’t notice it unless you saw the before/after which users will not. They might not even care about the images as is and are more likely to react to the different background colors on the images. At least, when they are placed side by side.

label[for="business-account"] img {
  display: block;
  padding-inline: 4px;
  object-fit: unset;
}

withpadding

1 Like
11

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