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
Hello everyone,
Does anybody uses Web Components in 2020? It’s quite old, but recently it seems to have some kind of revival.
I have be...
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
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,
I hope you have some tips for me. I am looking for further education including certificates (or similar) which are also accepted ...
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
Hey, I have migrated by blog from Pelican to Astro (static site generator)
Please give comments or feedback, thanks!
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
Introduction
The NKTg Law on Varying Inertia describes the tendency of an object in motion depending on its position, velocity, and mass...
New
Other popular topics
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
If it’s a mechanical keyboard, which switches do you have?
Would you recommend it? Why?
What will your next keyboard be?
Pics always w...
New
Machine learning can be intimidating, with its reliance on math and algorithms that most programmers don't encounter in their regular wor...
New
From finance to artificial intelligence, genetic algorithms are a powerful tool with a wide array of applications. But you don't need an ...
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
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
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
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
Ok, well here are some thoughts and opinions on some of the ergonomic keyboards I have, I guess like mini review of each that I use enoug...
New
Frontend>Chat
Categories:
Sub Categories:
Popular Portals
- /elixir
- /rust
- /wasm
- /ruby
- /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
- /html
- /opensuse
- /zig
- /centos
- /deepseek
- /php
- /scala
- /react-native
- /lisp
- /textmate
- /sublime-text
- /nixos
- /debian
- /agda
- /django
- /deno
- /kubuntu
- /arch-linux
- /nodejs
- /revery
- /ubuntu
- /manjaro
- /spring
- /lua
- /diversity
- /julia
- /markdown
- /c








