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'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
MikhailPertsev
Frontend>Chat

Modern CSS - what are you using/recommend?
Finally, I am going to enhance my css skills! I have always somehow ignored this, but now I finally decided to understand animations, tr...
#css#css-frameworks
15 879 6
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
First poster: bot
Frontend>Chat

Pluralsight offering free JavaScript courses throughout Dec 2020
techrepublic.com
/js
0 1357 1
New
pippo12
Frontend>Chat

Frontend developer certificates that are accepted on the job market?
Hello, I hope you have some tips for me. I am looking for further education including certificates (or similar) which are also accepted ...
#educational-resources
7 1139 3
New
First poster: bot
Frontend>Chat

Racing Game in ClojureScript
A 3D racing game built with ClojureScript, React and ThreeJS
github.com
#clojurescript
0 847 0
New
SynergyRob
Frontend>Chat

Game of double Chess called Synergy Chess
I invented a game of double Chess called Synergy Chess. I am not a coder. I hired someone to write the program. People can play online fo...
#chess
1 956 1
New
Fl4m3Ph03n1x
Frontend>Chat

Phoenix 1.7.0 interfaces and courses
Background I am trying to recycle myself and improve my knowledge about Phoenix. With 1.7 now out, this seems like a good opportunity. ...
/phoenix/tailwind#liveview
15 1403 7
New
DevynClark
Frontend>Chat

With the rise of AI - is there anything left for me?
Front-end Developer Griffin, USA As a student in college looking for a way to break into Front-end Web Development, the rise of things s...
#css/react#help-needed/html/js#networking
7 604 2
New

Other popular topics Top

AstonJ
General Dev>Hardware

Which keyboard do you have?
If it’s a mechanical keyboard, which switches do you have? Would you recommend it? Why? What will your next keyboard be? Pics always w...
#hardware/keyboards#sticky#mechanical-keyboards
144 9115 50
New
ohm
Science/Tech>Tech Chat

Games! Which do you play?
Which, if any, games do you play? On what platform? I just bought (and completed) Minecraft Dungeons for my Nintendo Switch. Other than ...
#games
246 6097 101
New
PragmaticBookshelf
Game Dev>Learning Resources

Apple Game Frameworks and Technologies
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
pragprog.com
#pragprog#ios#game-dev#macos/swift#published-book#apple/book-apple-game-frameworks-and-technologies
30 7995 10
New
AstonJ
General Dev>Code Editors

Poll: Which code editor do you use?
You might be thinking we should just ask who’s not using VSCode :joy: however there are some new additions in the space that might give V...
#community#polls/vim/emacs#code-editors/vscode#notepad/sublime-text#atom/textmate#codespaces#brackets/onivim#geany
121 5796 61
New
AstonJ
General Dev>Code Editors

Onivim 2 Code Editor
Thanks to @foxtrottwist’s and @Tomas’s posts in this thread: Poll: Which code editor do you use? I bought Onivim! :nerd_face: https://on...
#code-editors/onivim/revery
88 6144 32
New
DevotionGeo
General Dev>Code Editors

Dendron: a personal knowledge management tool on top of VSCode
/vscode#visual-studio-code
30 7372 9
New
AstonJ
Backend>Chat

How to install Ruby 3 with ASDF
In case anyone else is wondering why Ruby 3 doesn’t show when you do asdf list-all ruby :man_facepalming: do this first: asdf plugin-upd...
/ruby#asdf
11 5961 4
New
PragmaticBookshelf
Backend>Learning Resources

Programming WebRTC
Use WebRTC to build web applications that stream media and data in real time directly from one user to another, all in the browser. ...
pragprog.com
#pragprog#published-book/js#webrtc/book-programming-webrtc
27 6969 6
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
Fl4m3Ph03n1x
AI>Questions

What are the best text-to-speech ai generation tools that you can run locally?
Background Lately I am in a quest to find a good quality TTS ai generation tool to run locally in order to create audio for some videos I...
#ai#text-to-speech
6 8411 3
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