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
andresriveros
I’m very interested in the Stimulus reflex approach for frontend development: It is a great way to integrate action cable very easily ...
New
First poster: bot
React is Dead. Long live Reactive Rails! Long live StimulusReflex and ViewComponent!. Let me tell you about the feeling that I get when ...
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
AstonJ
We should probably add a WASM portal at some point :nerd_face: Edit: Done:
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
First poster: bot
A 3D racing game built with ClojureScript, React and ThreeJS
New
KnowledgeIsPower
It seems it is going to change, currently they forked Next.JS. Now they want to stop forking it and change their project direction.
New
KnowledgeIsPower
Hey, I have migrated by blog from Pelican to Astro (static site generator) Please give comments or feedback, thanks!
New
guaip
I’ve been doing front-end as a freelancer for 15 years. I have some PHP background and still do some backend stuff to this day, but I spe...
New

Other popular topics Top

AstonJ
A thread that every forum needs! Simply post a link to a track on YouTube (or SoundCloud or Vimeo amongst others!) on a separate line an...
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
siddhant3030
I’m thinking of buying a monitor that I can rotate to use as a vertical monitor? Also, I want to know if someone is using it for program...
New
New
PragmaticBookshelf
Rust is an exciting new programming language combining the power of C with memory safety, fearless concurrency, and productivity boosters...
New
dimitarvp
Small essay with thoughts on macOS vs. Linux: I know @Exadra37 is just waiting around the corner to scream at me “I TOLD YOU SO!!!” but I...
New
PragmaticBookshelf
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
New
PragmaticBookshelf
Build efficient applications that exploit the unique benefits of a pure functional language, learning from an engineer who uses Haskell t...
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
First poster: AstonJ
Jan | Rethink the Computer. Jan turns your computer into an AI machine by running LLMs locally on your computer. It’s a privacy-focus, l...
New