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
andresriveros
Frontend>Chat

StimulusReflex - an exciting new way to build modern, reactive, real-time apps with Rails
I’m very interested in the Stimulus reflex approach for frontend development: It is a great way to integrate action cable very easily ...
#real-time
9 1360 3
New
AstonJ
Frontend>Chat

What's your flavour of JS on the frontend?
Sprinkles of JS, or full frontend frameworks? What do you use and why?
#opinions#frontend/js
76 3148 26
New
michael
Frontend>Chat

Detecting Postgresql Table Change for LiveView
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...
#postgres#liveview
16 2178 5
New
AstonJ
Frontend>Chat

What do you think about TypeScript?
I was watching this video by Richard Feldman (Elm core team) and he’s predicting TypeScript is going to take over the JS world: ...
/typescript/elm#opinions
12 1921 3
New
AstonJ
Frontend>Chat

Are SPAs dying or becoming more popular/beginning to shine?
DHH might like you to believe they are a thing of the past: https://twitter.com/dhh/status/1275902566719610880 I actually went down thi...
/rails/angular/react#liveview/svelte/vuejs#spa#ssr
22 2958 6
New
DevotionGeo
Frontend>Chat

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

Online Hand to eye coordination test
Was just curious to see if any were around, found this one: I got 51/100: Not sure if it was meant to buy I am sure at times the b...
#online-tools
4 4562 1
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
NKTgLaw
Frontend>Chat

NKTg Law on Variable Inertia Across 150 Modern Languages
Introduction The NKTg Law on Varying Inertia describes the tendency of an object in motion depending on its position, velocity, and mass...
/wasm#nktglaw#variable-inertia
1 537 0
New

Other popular topics Top

PragmaticBookshelf
Backend>Learning Resources

Web Development with Clojure, Third Edition
Stop developing web apps with yesterday’s tools. Today, developers are increasingly adopting Clojure as a web-development platform. See f...
pragprog.com
#pragprog#web-development/clojure#published-book/book-web-development-with-clojure-third-edition
5 4584 1
New
AstonJ
General Dev>Hardware

Keyboard thock (sound)
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
/keyboards#mechanical-keyboards
14 11197 8
New
AstonJ
General Dev>Dev Chat

How fast do you type? Check your WPM here!
Do the test and post your score :nerd_face: :keyboard: If possible, please add info such as the keyboard you’re using, the layout (Qw...
typing-speed-test.aoeu.eu
/keyboards
82 7682 31
New
AstonJ
General Dev>Hardware

CharaChorder - type at the speed of thought?
Saw this on TikTok of all places! :lol: Anyone heard of them before? Lite:
/keyboards#charachorder
13 4703 4
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: Erin Dees (Author) Interview and AMA!
Author Spotlight Erin Dees @undees Welcome to our new author spotlight! We had the pleasure of chatting with Erin Dees, co-author of ...
#author-spotlight/ruby/rails/book-effective-testing-with-rspec-3/book-seven-more-languages-in-seven-weeks/book-cucumber-recipes#rspec
24 4247 11
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: Peter Ullrich (Author) Interview and AMA!
Author Spotlight: Peter Ullrich @PJUllrich Data is at the core of every business, but it is useless if nobody can access and analyze ...
/elixir/phoenix/book-building-table-views-with-phoenix-liveview
72 4765 21
New
PragmaticBookshelf
Backend>Learning Resources

Engineering Elixir Applications
Develop, deploy, and debug BEAM applications using BEAMOps: a new paradigm that focuses on scalability, fault tolerance, and owning each ...
pragprog.com
#pragprog/elixir#published-book/book-engineering-elixir-applications
40 7136 21
New
AstonJ
AI>Chat

How to: Run DeepSeek on Mac, Windows, and Linux!
This is a very quick guide, you just need to: Download LM Studio: https://lmstudio.ai/ Click on search Type DeepSeek, then select the o...
#macs/deepseek#guides#lm-studio
14 9328 10
New
AstonJ
AI>Chat

Post your DeepSeek results
Curious what kind of results others are getting, I think actually prefer the 7B model to the 32B model, not only is it faster but the qua...
/deepseek
15 4275 15
New
RobertRichards
Game Dev>Chat

Hair Salon Games for Girls Fun
Hair Salon Games for Girls Fun Girls Hair Saloon game is mainly developed for kids. This game allows users to select virtual avatars to ...
#ios#android#unity#fun
2 3556 1
New
Back to top

Sponsor Spotlight

Linux New Media

Publishing Linux Magazine, ADMIN, and MakerSpace for 25+ years.

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!"

Linux New Media

Publishing Linux Magazine, ADMIN, and MakerSpace for 25+ years.

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!"

Linux New Media

Publishing Linux Magazine, ADMIN, and MakerSpace for 25+ years.

View all our sponsors ❯

We're in Beta

About us Mission Statement See our Roadmap