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

Front end Developer Skills
Hello, This is pretty basic. I was trying to explore the front-end development as I was not from a tech background. But, very much inter...
#question
23 1760 7
New
XSukhpreet
Frontend>Chat

What is your best front-end tool?
My Favorite tool is figma, It helps a lot in designing .
#community#tech-news-source
34 1769 13
New
KnowledgeIsPower
Frontend>Chat

Anyone using Blitz.js?
It seems it is going to change, currently they forked Next.JS. Now they want to stop forking it and change their project direction.
#frontend/js#blitz
2 1479 0
New
vinay003
Frontend>Chat

Best Messaging API for Super apps
When it comes to integrating messaging features into super apps, you’ll want a reliable and efficient solution. Here are some top SMS API...
#messaging
0 763 0
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
Backend>Learning Resources

Programming Machine Learning
Machine learning can be intimidating, with its reliance on math and algorithms that most programmers don't encounter in their regular wor...
pragprog.com
#pragprog#ai/python#published-book/book-programming-machine-learning#math#algorithms
6 5350 3
New
PragmaticBookshelf
Backend>Learning Resources

Seven Languages in Seven Weeks
Ruby, Io, Prolog, Scala, Erlang, Clojure, Haskell. With Seven Languages in Seven Weeks, by Bruce A. Tate, you’ll go beyond the syntax—and...
pragprog.com
#pragprog/clojure/erlang/haskell/prolog/ruby/scala#published-book/book-seven-languages-in-seven-weeks
5 5730 1
New
AstonJ
General Dev>Hardware

Custom keyboard keycaps
There’s a whole world of custom keycaps out there that I didn’t know existed! Check out all of our Keycaps threads here: https://forum....
#hardware/keyboards#keycaps#mechanical-keyboards
15 11086 19
New
PragmaticBookshelf
Frontend>Learning Resources

Modern CSS with Tailwind
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
pragprog.com
#pragprog/tailwind#published-book/book-modern-css-with-tailwind
12 5813 4
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
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
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
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
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
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

Pragmatic Studio

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

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