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
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
hlang in 30 Seconds
hlang (the h language) is a revolutionary new use of WebAssembly that enables single-paridigm programming without any...
New
Just like I did one on Tailwind some time ago, I am going to play with AlpineJS the next few days. It’s a nice little JS framework that ...
New
A 3D racing game built with ClojureScript, React and ThreeJS
New
New
It seems it is going to change, currently they forked Next.JS. Now they want to stop forking it and change their project direction.
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
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’ve been doing front-end as a freelancer for 15 years. I have some PHP background and still do some backend stuff to this day, but I spe...
New
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...
New
Other popular topics
I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
New
We have a thread about the keyboards we have, but what about nice keyboards we come across that we want? If you have seen any that look n...
New
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
Create efficient, elegant software tests in pytest, Python's most powerful testing framework.
Brian Okken @brianokken
Edited by Kat...
New
Intensively researching Erlang books and additional resources on it, I have found that the topic of using Regular Expressions is either c...
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
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:
Bruce Tate
@redrapids
Programming languages always emerge out of need, and if that’s not always true, they’re defin...
New
Jan | Rethink the Computer.
Jan turns your computer into an AI machine by running LLMs locally on your computer. It’s a privacy-focus, l...
New
This is a very quick guide, you just need to:
Download LM Studio: https://lmstudio.ai/
Click on search
Type DeepSeek, then select the o...
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
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /elm
- /flutter
- /vscode
- /ash
- /opensuse
- /html
- /centos
- /php
- /zig
- /deepseek
- /scala
- /sublime-text
- /textmate
- /lisp
- /react-native
- /debian
- /nixos
- /agda
- /kubuntu
- /arch-linux
- /django
- /deno
- /nodejs
- /revery
- /ubuntu
- /spring
- /manjaro
- /diversity
- /lua
- /julia
- /markdown
- /c








