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
Any thoughts on Svelte?
Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue...
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
Some resources for Spring
Home of Spring
Spring Initializr
Head First Spring with Reactor
New
Which WebAssembly language/s interest you?
I just discovered AssemblyScript (portal | thread) which looks interesting!
Here are some of...
New
PWA capabilities are getting better by the day…
New
Hello,
This is pretty basic. I was trying to explore the front-end development as I was not from a tech background. But, very much inter...
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
For the last few months I’ve been (re)-learning vanilla CSS. Initially I did not ‘get’ how to structure CSS to take advantage of the ‘cas...
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
Other popular topics
Algorithms and data structures are much more than abstract concepts. Mastering them enables you to write code that runs faster and more e...
New
Write Elixir tests that you can be proud of. Dive into Elixir’s test philosophy and gain mastery over the terminology and concepts that u...
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 have seen the keycaps I want - they are due for a group-buy this week but won’t be delivered until October next year!!! :rofl:
The Ser...
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
In case anyone else is wondering why Ruby 3 doesn’t show when you do asdf list-all ruby :man_facepalming: do this first:
asdf plugin-upd...
New
Use WebRTC to build web applications that stream media and data in real time directly from one user to another, all in the browser.
...
New
A few weeks ago I started using Warp a terminal written in rust. Though in it’s current state of development there are a few caveats (tab...
New
Explore the power of Ash Framework by modeling and building the domain for a real-world web application.
Rebecca Le @sevenseacat and ...
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
- /java
- /haskell
- /svelte
- /onivim
- /typescript
- /kotlin
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /flutter
- /elm
- /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
- /diversity
- /lua
- /julia
- /markdown
- /slackware








