Frontend>Chat

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

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?

1 comment
#frontend
2 882 1

Most Liked

jkdiaz

jkdiaz

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

1
Post #2

Where Next?

View thread on forum
frontend
Home Frontend>Chat
#frontend
2 882 1
Last post

Popular Frontend topics Top

AstonJ
Frontend>Chat

What do you think of Animate.css
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 ...
#css#animations
3 924 1
New
First poster: bot
Frontend>Chat

Declarative Shadow DOM
web.dev
0 1008 0
New
First poster: bot
Frontend>Chat

ARM chips have an instruction with JavaScript in the name
Why do ARM chips have an instruction with Javascript in the name (FJCVTZS)?. FJCVTZS is “Floating-point Javascript Convert to Signed fix...
stackoverflow.com
#arm#chips/js
0 1422 0
New
mafinar
Frontend>Chat

Weekend with AlpineJS
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 ...
#journal/js
30 2862 11
New
ClaudiaGiv
Frontend>Chat

SSR explained in SvelteKit
Hi all, I recently started working with Svelte and created a small app with SvelteKit in order to understand better the framework. I hav...
/svelte#ssr
6 2500 1
New
First poster: bot
Frontend>Chat

Interactive Periodic Table
Interactive periodic table showing names, electrons, and oxidation states. Visualize trends, 3D orbitals, isotopes, and mix compounds. Fu...
ptable.com
#frontend-demos
0 991 0
New
DevotionGeo
Frontend>Chat

Is there a vanilla CSS alternative to Tailwind UI?
#css/tailwind#ui-components
28 2620 8
New
KnowledgeIsPower
Frontend>Chat

Sharing a blog about the Astro SSG
Hey, I have migrated by blog from Pelican to Astro (static site generator) Please give comments or feedback, thanks!
#astro
6 955 1
New
Reinis
Frontend>Chat

Good CSS learning resources and blog posts?
For the last few months I’ve been (re)-learning vanilla CSS. Initially I did not ‘get’ how to structure CSS to take advantage of the ‘cas...
#css
18 1237 6
New
jaeyson
Frontend>Chat

Can ReactJS and LiveView coexist nicely?
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...
/elixir/phoenix/react#liveview#frontend
1 980 0
New

Other popular topics Top

PragmaticBookshelf
General Dev>Learning Resources

Seven More Languages in Seven Weeks
Learn from the award-winning programming series that inspired the Elixir language, and go on a step-by-step journey through the most impo...
pragprog.com
#pragprog/elixir/julia/lua#published-book#factor/elm#minikanren/idris/book-seven-more-languages-in-seven-weeks
4 5862 0
New
Exadra37
General Dev>Hardware

What monitor(s) do you have for programming?
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...
#monitors#coding#programming#development
227 11362 88
New
DevotionGeo
Backend>Questions

Can someone explain the -t option/flag in docker run command?
I know that -t flag is used along with -i flag for getting an interactive shell. But I cannot digest what the man page for docker run com...
#docker
7 10261 2
New
AstonJ
General Dev>Dev Chat

Which language or framework do you want to learn next?
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
#community#learning
243 6639 97
New
foxtrottwist
General Dev>Dev Chat

Warp—The blazingly fast, Rust-based terminal
A few weeks ago I started using Warp a terminal written in rust. Though in it’s current state of development there are a few caveats (tab...
/rust#terminal
52 6785 22
New
mafinar
Backend>Chat

Data Structures and Algorithms with Elixir
This is going to be a long an frequently posted thread. While talking to a friend of mine who has taken data structure and algorithm cou...
/elixir#algorithms#data-structures
108 11869 31
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: Jamis Buck (Author) Interview and AMA!
Author Spotlight Jamis Buck @jamis This month, we have the pleasure of spotlighting author Jamis Buck, who has written Mazes for Prog...
#author-spotlight/ruby/book-the-ray-tracer-challenge/book-mazes-for-programmers
21 6352 9
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: Mike Riley (Author) Interview and AMA!
Author Spotlight Mike Riley @mriley This month, we turn the spotlight on Mike Riley, author of Portable Python Projects. Mike’s book ...
#author-spotlight/python#iot/book-portable-python-projects#internet-of-things
62 7035 19
New
husaindevelop
Android>Questions

Clipboard readtext not working in android webview
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
#android#clipboard
1 5651 0
New
PragmaticBookshelf
Backend>Learning Resources

Programming Ruby 3.2 (5th Edition)
Programming Ruby is the most complete book on Ruby, covering both the language itself and the standard library as well as commonly used t...
twitter.com
#pragprog/ruby/rails#published-book/book-programming-ruby-3-2-5th-edition
28 8550 13
New
Back to top

Sponsor Spotlight

Erlang Solutions

We build trusted fault-tolerant systems that scale to billions of users.

Frontend>Chat

Frontend Chat ❯

Latest on Devtalk

Devtalk ❯

We ❤️ helpful members!

We reward our most helpful members via our MOTM scheme - by giving away a whopping 25 books per year!

Member of the Month

Devtalk Sponsors

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Erlang Solutions

We build trusted fault-tolerant systems that scale to billions of users.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

EEF

Supporting innovation across the BEAM ecosystem.

coders51

We build reliable cloud platforms for business-critical systems.

Manning Publications

Develop your skills with books, videos, and courses.

AppSignal

Catch errors, track performance, monitor hosts and more.

WyeWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Popular Portals

Devtalk Sponsors

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Erlang Solutions

We build trusted fault-tolerant systems that scale to billions of users.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

EEF

Supporting innovation across the BEAM ecosystem.

coders51

We build reliable cloud platforms for business-critical systems.

Manning Publications

Develop your skills with books, videos, and courses.

AppSignal

Catch errors, track performance, monitor hosts and more.

WyeWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement See our Roadmap