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
I was watching this video by Richard Feldman (Elm core team) and he’s predicting TypeScript is going to take over the JS world:
...
New
React is Dead. Long live Reactive Rails! Long live StimulusReflex and ViewComponent!.
Let me tell you about the feeling that I get when ...
New
Why do ARM chips have an instruction with Javascript in the name (FJCVTZS)?.
FJCVTZS is “Floating-point Javascript Convert to Signed fix...
New
Just discovered AssemblyScript (our portal is here).
It…“aims to make it easy to compile to WebAssembly using TypeScript, no strings att...
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
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:
HT...
New
Front-end Developer Griffin, USA
As a student in college looking for a way to break into Front-end Web Development, the rise of things s...
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
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
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
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face:
Perhaps if there’s enough peop...
New
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
New
New
This is going to be a long an frequently posted thread.
While talking to a friend of mine who has taken data structure and algorithm cou...
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
I am trying to crate a game for the Nintendo switch, I wanted to use Java as I am comfortable with that programming language. Can you use...
New
Author Spotlight
Mike Riley
@mriley
This month, we turn the spotlight on Mike Riley, author of Portable Python Projects. Mike’s book ...
New
Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
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
- /java
- /emacs
- /haskell
- /svelte
- /onivim
- /typescript
- /kotlin
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /flutter
- /elm
- /ash
- /vscode
- /html
- /opensuse
- /zig
- /centos
- /deepseek
- /php
- /scala
- /react-native
- /lisp
- /textmate
- /sublime-text
- /nixos
- /debian
- /agda
- /django
- /deno
- /kubuntu
- /arch-linux
- /nodejs
- /spring
- /revery
- /ubuntu
- /manjaro
- /julia
- /lua
- /diversity
- /markdown
- /slackware









