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

AstonJ
I like it! https://daneden.github.io/animate.css For those of you who visited hello.forum.devtalk.com you’ll have seen it in action on ...
New
michael
So I have a table of MediaItems and when that list changes, say new entries, I’d like LiveView to know about that so that the Timeline up...
New
New
finner
Some resources for Spring Home of Spring Spring Initializr Head First Spring with Reactor
New
New
First poster: bot
hlang in 30 Seconds hlang (the h language) is a revolutionary new use of WebAssembly that enables single-paridigm programming without any...
New
ClaudiaGiv
Hi all, I recently started working with Svelte and created a small app with SvelteKit in order to understand better the framework. I hav...
New
First poster: bot
Interactive periodic table showing names, electrons, and oxidation states. Visualize trends, 3D orbitals, isotopes, and mix compounds. Fu...
New
SynergyRob
I invented a game of double Chess called Synergy Chess. I am not a coder. I hired someone to write the program. People can play online fo...
New
jaeyson
Hi Elixir and React friends! I read a post (Stephen Bussey - React in LiveView: How and Why?) on use case for reaching react for complex...
New

Other popular topics Top

Devtalk
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
1033 17470 383
New
wolf4earth
@AstonJ prompted me to open this topic after I mentioned in the lockdown thread how I started to do a lot more for my fitness. https://f...
New
AstonJ
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
New
New
Margaret
Hello content creators! Happy new year. What tech topics do you think will be the focus of 2021? My vote for one topic is ethics in tech...
New
Exadra37
Oh just spent so much time on this to discover now that RancherOS is in end of life but Rancher is refusing to mark the Github repo as su...
New
AstonJ
Saw this on TikTok of all places! :lol: Anyone heard of them before? Lite:
New
PragmaticBookshelf
Author Spotlight Mike Riley @mriley This month, we turn the spotlight on Mike Riley, author of Portable Python Projects. Mike’s book ...
New
New
Fl4m3Ph03n1x
Background Lately I am in a quest to find a good quality TTS ai generation tool to run locally in order to create audio for some videos I...
New