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 515 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 515 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 600 1
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 1825 5
New
bot
Frontend>Chat

Vue.js Creator Evan You Interview
#vue-js
0 923 0
New
finner
Frontend>Chat

Spring Resources
Some resources for Spring Home of Spring Spring Initializr Head First Spring with Reactor
/spring
2 1213 0
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 1132 2
New
First poster: bot
Frontend>Chat

Hlang in 30 Seconds
hlang in 30 Seconds hlang (the h language) is a revolutionary new use of WebAssembly that enables single-paridigm programming without any...
christine.website
/wasm
2 1016 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 1945 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 767 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 738 1
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 312 0
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
1033 17470 383
New
wolf4earth
Science/Tech>Health & Diet

How do you keep fit and healthy?
@AstonJ prompted me to open this topic after I mentioned in the lockdown thread how I started to do a lot more for my fitness. https://f...
#fitness#heath
193 4510 82
New
AstonJ
General Dev>Dev Chat

Which language or framework do you want to learn next?
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
#community#learning
243 5922 95
New
First poster: bot
Backend>In The News

Bit – A modernized Git CLI written in Go
github.com
/go#git
1 5529 0
New
Margaret
General Dev>Content Creators

What tech topics do you think will (or should) be the focus of 2021?
Hello content creators! Happy new year. What tech topics do you think will be the focus of 2021? My vote for one topic is ethics in tech...
#general
110 3900 43
New
Exadra37
Linux>Chat

RancherOS is in end of life
Oh just spent so much time on this to discover now that RancherOS is in end of life but Rancher is refusing to mark the Github repo as su...
#linux#rancheros
10 5256 6
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 3957 4
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 6351 19
New
First poster: CommunityNews
AI>In The News

How to fix the eyes in AI-generated images
aidemos.info
0 3038 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 2202 3
New
Back to top

Sponsor Spotlight

Manning

Develop your skills with books, videos, and courses.

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.

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'll 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.

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'll 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