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
:rotating_light: Silly Post Alert :rotating_light:
With the Coronavirus keeping the majority of us developers quarantined, how many “new...
New
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
Which WebAssembly language/s interest you?
I just discovered AssemblyScript (portal | thread) which looks interesting!
Here are some of...
New
Wondering if anyone has any thoughts on choosing between these two languages for WebAssembly?
I definitely want to explore wasm, and rea...
New
I (re-)realized I had the book “Modern CSS with Tailwind” bought, never read a page of it until today. With me being a fast reader and th...
New
Hi all,
I recently started working with Svelte and created a small app with SvelteKit in order to understand better the framework. I hav...
New
Was just curious to see if any were around, found this one:
I got 51/100:
Not sure if it was meant to buy I am sure at times the b...
New
A few months ago, Uno Platform unveiled Uno Platform for Figma plugin, a plugin created to turn your high-fidelity Figma design into XAML...
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
What chair do you have while working… and why?
Is there a ‘best’ type of chair or working position for developers?
New
Please tell us what is your preferred monitor setup for programming(not gaming) and why you have chosen it.
Does your monitor have eye p...
New
I know that -t flag is used along with -i flag for getting an interactive shell. But I cannot digest what the man page for docker run com...
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
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
New
Build efficient applications that exploit the unique benefits of a pure functional language, learning from an engineer who uses Haskell t...
New
Author Spotlight
Erin Dees
@undees
Welcome to our new author spotlight! We had the pleasure of chatting with Erin Dees, co-author of ...
New
New
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
New
There appears to have been an update that has changed the terminology for what has previously been known as the Taskbar Overflow - this h...
New
Frontend>Chat
Categories:
Sub Categories:
Popular Portals
- /elixir
- /rust
- /ruby
- /wasm
- /erlang
- /phoenix
- /keyboards
- /python
- /js
- /rails
- /security
- /go
- /swift
- /vim
- /clojure
- /emacs
- /haskell
- /java
- /svelte
- /onivim
- /typescript
- /kotlin
- /crystal
- /c-plus-plus
- /tailwind
- /react
- /gleam
- /ocaml
- /flutter
- /elm
- /vscode
- /ash
- /html
- /opensuse
- /centos
- /zig
- /deepseek
- /php
- /scala
- /react-native
- /sublime-text
- /lisp
- /textmate
- /debian
- /nixos
- /agda
- /kubuntu
- /django
- /arch-linux
- /deno
- /nodejs
- /ubuntu
- /revery
- /spring
- /manjaro
- /lua
- /diversity
- /julia
- /markdown
- /slackware








