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
Any thoughts on Svelte?
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue...
New
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...
New
hlang in 30 Seconds
hlang (the h language) is a revolutionary new use of WebAssembly that enables single-paridigm programming without any...
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
Interactive periodic table showing names, electrons, and oxidation states. Visualize trends, 3D orbitals, isotopes, and mix compounds. Fu...
New
My Favorite tool is figma, It helps a lot in designing .
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
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
Background
I am trying to recycle myself and improve my knowledge about Phoenix. With 1.7 now out, this seems like a good opportunity.
...
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
Other popular topics
Reading something? Working on something? Planning something? Changing jobs even!?
If you’re up for sharing, please let us know what you’...
New
A thread that every forum needs!
Simply post a link to a track on YouTube (or SoundCloud or Vimeo amongst others!) on a separate line an...
New
poll
poll
Be sure to check out @Dusty’s article posted here: An Introduction to Alternative Keyboard Layouts It’s one of the best write-...
New
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...
New
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
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
Author Spotlight:
Peter Ullrich
@PJUllrich
Data is at the core of every business, but it is useless if nobody can access and analyze ...
New
Develop, deploy, and debug BEAM applications using BEAMOps: a new paradigm that focuses on scalability, fault tolerance, and owning each ...
New
I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc.
However, I don’t...
New
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...
New
Frontend>Chat
Categories:
Sub Categories:
Popular Portals
- /elixir
- /rust
- /wasm
- /ruby
- /erlang
- /phoenix
- /keyboards
- /python
- /js
- /rails
- /security
- /go
- /swift
- /vim
- /clojure
- /emacs
- /java
- /haskell
- /svelte
- /onivim
- /typescript
- /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
- /revery
- /ubuntu
- /spring
- /manjaro
- /lua
- /diversity
- /julia
- /markdown
- /c








