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
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...
New
New
DHH might like you to believe they are a thing of the past:
https://twitter.com/dhh/status/1275902566719610880
I actually went down thi...
New
The Analytics That Matter | CSS-Tricks.
I’ve long been skeptical of quoting global browser usage percentages to justify their usage of b...
New
We should probably add a WASM portal at some point :nerd_face:
Edit: Done:
New
Wondering if anyone has any thoughts on choosing between these two languages for WebAssembly?
I definitely want to explore wasm, and rea...
New
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...
New
Hey, I have migrated by blog from Pelican to Astro (static site generator)
Please give comments or feedback, thanks!
New
Does anyone know of any companies that are accepting remote work for junior front-end devs or UI designers? I’m not even looking for some...
New
I created a web-synthesizer that generates sound from the binary code of any files. It can synthesize sound directly in the browser, or b...
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
Bought the Moonlander mechanical keyboard. Cherry Brown MX switches. Arms and wrists have been hurting enough that it’s time I did someth...
New
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face:
Perhaps if there’s enough peop...
New
Rust is an exciting new programming language combining the power of C with memory safety, fearless concurrency, and productivity boosters...
New
Just done a fresh install of macOS Big Sur and on installing Erlang I am getting:
asdf install erlang 23.1.2
Configure failed.
checking ...
New
This looks like a stunning keycap set :orange_heart:
A LEGENDARY KEYBOARD LIVES ON
When you bought an Apple Macintosh computer in the e...
New
Saw this on TikTok of all places! :lol:
Anyone heard of them before?
Lite:
New
Author Spotlight
Dmitry Zinoviev
@aqsaqal
Today we’re putting our spotlight on Dmitry Zinoviev, author of Data Science Essentials in ...
New
Node.js v22.14.0 has been released.
Link: Release 2025-02-11, Version 22.14.0 'Jod' (LTS), @aduh95 · nodejs/node · GitHub
New
Use advanced functional programming principles, practical Domain-Driven Design techniques, and production-ready Elixir code to build scal...
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
- /typescript
- /onivim
- /kotlin
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /elm
- /flutter
- /vscode
- /ash
- /html
- /opensuse
- /zig
- /centos
- /deepseek
- /php
- /scala
- /react-native
- /lisp
- /textmate
- /sublime-text
- /nixos
- /debian
- /agda
- /django
- /deno
- /kubuntu
- /arch-linux
- /nodejs
- /ubuntu
- /revery
- /spring
- /manjaro
- /diversity
- /lua
- /julia
- /markdown
- /quarkus









