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

malloryerik
Frontend>Chat

Svelte - what do you think about it?
Any thoughts on Svelte? Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue...
#opinions/svelte
54 3884 17
New
AstonJ
Frontend>Chat

What's your favourite tools/languages that compile into JS?
Here’s a pretty good list of them: https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS What’s your favou...
#opinions#transpilers/js
23 1922 8
New
First poster: bot
Frontend>Chat

Declarative Shadow DOM
web.dev
0 1008 0
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
First poster: bot
Frontend>Chat

React is Dead. Long live Reactive Rails! Long live StimulusReflex and ViewComponent
React is Dead. Long live Reactive Rails! Long live StimulusReflex and ViewComponent!. Let me tell you about the feeling that I get when ...
medium.com
/rails/react#stimulus-reflex#stimulus
1 1638 0
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
AstonJ
Frontend>Chat

What is your preferred language for WebAssembly?
Which WebAssembly language/s interest you? I just discovered AssemblyScript (portal | thread) which looks interesting! Here are some of...
#wruby
3 2605 2
New
AstonJ
Frontend>Chat

Progressive Web Apps in 100 Seconds
PWA capabilities are getting better by the day…
youtube.com
#video#pwa#progressive-web-apps
3 1421 2
New
mafinar
Frontend>Chat

A little weekend learning: Trying out Tailwind
I (re-)realized I had the book “Modern CSS with Tailwind” bought, never read a page of it until today. With me being a fast reader and th...
/tailwind#journal/book-modern-css-with-tailwind
26 2579 9
New

Other popular topics Top

Devtalk
General Dev>Dev Chat

What dev-related stuff have you been up to?
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
#community
1052 22283 402
New
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
Rainer
Community>Journals

Programming Erlang Book Club
My first contact with Erlang was about 2 years ago when I used RabbitMQ, which is written in Erlang, for my job. This made me curious and...
/erlang/book-programming-erlang-2nd-edition#book-club
195 6815 95
New
PragmaticBookshelf
Data Science

Genetic Algorithms in Elixir
From finance to artificial intelligence, genetic algorithms are a powerful tool with a wide array of applications. But you don't need an ...
#pragprog#ai/elixir#published-book/book-genetic-algorithms-in-elixir
25 5243 6
New
AstonJ
General Dev>Hardware

BIIP MT3 Extended 2048 Custom Keycap Set (Drop)
This looks like a stunning keycap set :orange_heart: A LEGENDARY KEYBOARD LIVES ON When you bought an Apple Macintosh computer in the e...
/keyboards#apple#keycaps#mechanical-keyboards
14 6713 7
New
PragmaticBookshelf
Backend>Learning Resources

Agile Web Development with Rails 7
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
pragprog.com
#pragprog#web-development/ruby/rails#published-book/book-agile-web-development-with-rails-7
32 6600 9
New
DevotionGeo
General Dev>Questions

Do you prefer regular mechanical keyboards or low profile mechanical keyboards and why?
I have always used antique keyboards like Cherry MX 1800 or Cherry MX 8100 and almost always have modified the switches in some way, like...
/keyboards#mechanical-keyboards
27 3877 9
New
First poster: AstonJ
General Dev>In The News

Jan: An open source alternative to ChatGPT that runs on the desktop
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...
jan.ai
#desktop#chatgpt
4 5652 4
New
sir.laksmana_wenk
Game Dev>Questions

I want to learn how make a game, but where should I start?
I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc. However, I don’t...
#game-dev
15 4965 9
New
AnfaengerAlex
Android>Questions

Unresolved Reference to android in build.gradle.kts – Beginner Issue
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
#binding
0 7460 2
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!"

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