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?
Most Liked
jkdiaz
Did you try adding display: block to the .image class?
1
Popular Frontend topics
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 ...
New
Any thoughts on Svelte?
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue...
New
Some resources for Spring
Home of Spring
Spring Initializr
Head First Spring with Reactor
New
Wondering if anyone has any thoughts on choosing between these two languages for WebAssembly?
I definitely want to explore wasm, and rea...
New
23.44%
of the PRs made by outsiders (not owners/members) get merged.
PRs usually closed after 0.17 days (median)
** Based on most recen...
New
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...
New
Hey, I have migrated by blog from Pelican to Astro (static site generator)
Please give comments or feedback, thanks!
New
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:
HT...
New
For the last few months I’ve been (re)-learning vanilla CSS. Initially I did not ‘get’ how to structure CSS to take advantage of the ‘cas...
New
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...
New
Other popular topics
Machine learning can be intimidating, with its reliance on math and algorithms that most programmers don't encounter in their regular wor...
New
Write Elixir tests that you can be proud of. Dive into Elixir’s test philosophy and gain mastery over the terminology and concepts that u...
New
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....
New
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...
New
I am asking for any distro that only has the bare-bones to be able to get a shell in the server and then just install the packages as we ...
New
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
New
If you get Can't find emacs in your PATH when trying to install Doom Emacs on your Mac you… just… need to install Emacs first! :lol:
bre...
New
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...
New
Author Spotlight:
Bruce Tate
@redrapids
Programming languages always emerge out of need, and if that’s not always true, they’re defin...
New
I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc.
However, I don’t...
New
Frontend>Chat
Categories:
Sub Categories:
Popular Portals
- /elixir
- /rust
- /wasm
- /ruby
- /erlang
- /phoenix
- /keyboards
- /python
- /js
- /rails
- /security
- /go
- /swift
- /vim
- /clojure
- /java
- /emacs
- /haskell
- /svelte
- /onivim
- /typescript
- /kotlin
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /flutter
- /elm
- /vscode
- /ash
- /html
- /opensuse
- /zig
- /centos
- /deepseek
- /php
- /scala
- /react-native
- /lisp
- /sublime-text
- /textmate
- /nixos
- /debian
- /agda
- /django
- /deno
- /kubuntu
- /arch-linux
- /nodejs
- /revery
- /ubuntu
- /spring
- /manjaro
- /lua
- /diversity
- /julia
- /markdown
- /slackware









