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

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

Which CSS framework do you use?
Inspired by @dbernheisel’s post here, which CSS framework do you use and why?
#css#css-frameworks
60 2149 15
New
kokolegorille
Frontend>Chat

Web components in 2020
Hello everyone, Does anybody uses Web Components in 2020? It’s quite old, but recently it seems to have some kind of revival. I have be...
#web-components
15 1152 4
New
AstonJ
Frontend>Chat

Web Assembly (WASM) in 100 Seconds
We should probably add a WASM portal at some point :nerd_face: Edit: Done:
youtube.com
#video/wasm
1 1151 0
New
finner
Frontend>Chat

Spring Resources
Some resources for Spring Home of Spring Spring Initializr Head First Spring with Reactor
/spring
2 1664 0
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
EngineerHamziey
Frontend>Chat

Are there any sites to help with UX design skills?
Hello everyone, is there a website or app that I can use to improve my self Like where there are UI UX designs to practice with and then...
#dev-news-source#tech-news-source
10 2649 3
New
riyajohnson
Frontend>Chat

Choosing the Right Framework: Comparing Pros and Cons
When it comes to selecting a framework for a development project, it’s crucial to make an informed decision. With so many options availab...
/angular/react#development#frameworks/vuejs
2 641 1
New
max_alyokhin
Frontend>Chat

Binary synth — sound from binary code of any files
I created a web-synthesizer that generates sound from the binary code of any files. It can synthesize sound directly in the browser, or b...
0 244 0
New

Other popular topics Top

PragmaticBookshelf
Game Dev>Learning Resources

The Ray Tracer Challenge
Brace yourself for a fun challenge: build a photorealistic 3D renderer from scratch! In just a couple of weeks, build a ray tracer that r...
pragprog.com
#pragprog#published-book/book-the-ray-tracer-challenge#algorithms
3 6115 0
New
Exadra37
Linux>Questions

AMD or Intel for Programming with Linux as the OS?
I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
#mobile#android#web-development#linux#desktop-computer#mobile-development
36 6006 10
New
dasdom
General Dev>Dev Chat

Standing Desks
No chair. I have a standing desk. This post was split into a dedicated thread from our thread about chairs :slight_smile:
#workspace#opinions
177 9554 77
New
Maartz
General Dev>Dev Chat

Roc Language - a new purely functional programming language built for speed and ergonomics
Hi folks, I don’t know if I saw this here but, here’s a new programming language, called Roc Reminds me a bit of Elm and thus Haskell. ...
#programminguages#functional-programming
49 5164 14
New
PragmaticBookshelf
Backend>Learning Resources

Effective Haskell
Build efficient applications that exploit the unique benefits of a pure functional language, learning from an engineer who uses Haskell t...
pragprog.com
#pragprog/haskell#published-book/book-effective-haskell
15 10218 1
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
hilfordjames
Windows>Chat

Taskbar Overflow Menu (NOT System Tray Overflow)
There appears to have been an update that has changed the terminology for what has previously been known as the Taskbar Overflow - this h...
#taskbar-overflow-win-11
3 3715 2
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: Bruce Tate (Author) Interview and AMA!
Author Spotlight: Bruce Tate @redrapids Programming languages always emerge out of need, and if that’s not always true, they’re defin...
/elixir/ruby/phoenix/book-seven-more-languages-in-seven-weeks/book-seven-languages-in-seven-weeks#liveview/book-programming-phoenix-liveview
54 5678 23
New
CommunityNews
General Dev>In The News

X can’t stop spread of explicit, fake AI Taylor Swift images
Will Swifties’ war on AI fakes spark a deepfake porn reckoning?
arstechnica.com
/swift
0 8379 0
New
PragmaticBookshelf
Backend>Learning Resources

MySQL 9 Essentials
A concise guide to MySQL 9 database administration, covering fundamental concepts, techniques, and best practices. Neil Smyth MySQL...
pragprog.com
#pragprog#published-book/mysql/book-mysql-9-essentials
2 4162 0
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