harwind

harwind

Why does the image in my `<img>` tag appear larger than its specified width within a flex container?

Why does the image in my <img> tag appear larger than its specified width within a flex container? Here’s my HTML and CSS code:

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

<div class="container">
  <img src="image.jpg" alt="Sample Image" class="image">
</div>

</body>
</html>

CSS (styles.css):

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

.image {
  width: 100px;
  height: auto;
}

I expected the image to be 100 pixels wide, but it appears larger than that within the flex container. What am I doing wrong in the CSS that’s causing the image to not adhere to the specified width?

Most Liked

jkdiaz

jkdiaz

Did you try adding display: block to the .image class?

Where Next?

Popular Frontend topics Top

justinjunodev
:rotating_light: Silly Post Alert :rotating_light: With the Coronavirus keeping the majority of us developers quarantined, how many “new...
New
AstonJ
Inspired by @dbernheisel’s post here, which CSS framework do you use and why?
New
DevotionGeo
Dart is not the first language with that mistake, but it’s newer. It shouldn’t have repeated this mistake.
New
New
AstonJ
DHH might like you to believe they are a thing of the past: https://twitter.com/dhh/status/1275902566719610880 I actually went down thi...
New
First poster: bot
The Analytics That Matter | CSS-Tricks. I’ve long been skeptical of quoting global browser usage percentages to justify their usage of b...
New
AstonJ
Wondering if anyone has any thoughts on choosing between these two languages for WebAssembly? I definitely want to explore wasm, and rea...
New
mafinar
Just like I did one on Tailwind some time ago, I am going to play with AlpineJS the next few days. It’s a nice little JS framework that ...
New
Ayushk
Hello, This is pretty basic. I was trying to explore the front-end development as I was not from a tech background. But, very much inter...
New
harwind
Why does the image in my &lt;img&gt; tag appear larger than its specified width within a flex container? Here’s my HTML and CSS code: HT...
New

Other popular topics Top

AstonJ
Or looking forward to? :nerd_face:
485 12328 258
New
Exadra37
Please tell us what is your preferred monitor setup for programming(not gaming) and why you have chosen it. Does your monitor have eye p...
New
PragmaticBookshelf
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
New
Exadra37
I am asking for any distro that only has the bare-bones to be able to get a shell in the server and then just install the packages as we ...
New
mafinar
Crystal recently reached version 1. I had been following it for awhile but never got to really learn it. Most languages I picked up out o...
New
AstonJ
Saw this on TikTok of all places! :lol: Anyone heard of them before? Lite:
New
New
DevotionGeo
I have always used antique keyboards like Cherry MX 1800 or Cherry MX 8100 and almost always have modified the switches in some way, like...
New
New
RobertRichards
Hair Salon Games for Girls Fun Girls Hair Saloon game is mainly developed for kids. This game allows users to select virtual avatars to ...
New