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

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
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
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
pippo12
Hello, I hope you have some tips for me. I am looking for further education including certificates (or similar) which are also accepted ...
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
First poster: bot
Interactive periodic table showing names, electrons, and oxidation states. Visualize trends, 3D orbitals, isotopes, and mix compounds. Fu...
New
KnowledgeIsPower
Hey, I have migrated by blog from Pelican to Astro (static site generator) Please give comments or feedback, thanks!
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’...
1052 22283 402
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
Build highly interactive applications without ever leaving Elixir, the way the experts do. Let LiveView take care of performance, scalabi...
New
Margaret
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
1147 29994 760
New
PragmaticBookshelf
Use WebRTC to build web applications that stream media and data in real time directly from one user to another, all in the browser. ...
New
PragmaticBookshelf
Author Spotlight Jamis Buck @jamis This month, we have the pleasure of spotlighting author Jamis Buck, who has written Mazes for Prog...
New
PragmaticBookshelf
Author Spotlight: Peter Ullrich @PJUllrich Data is at the core of every business, but it is useless if nobody can access and analyze ...
New
sir.laksmana_wenk
I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc. However, I don’t...
New
PragmaticBookshelf
Get the comprehensive, insider information you need for Rails 8 with the new edition of this award-winning classic. Sam Ruby @rubys ...
New
AstonJ
This is cool! DEEPSEEK-V3 ON M4 MAC: BLAZING FAST INFERENCE ON APPLE SILICON We just witnessed something incredible: the largest open-s...
New