harwind

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

jkdiaz

Did you try adding display: block to the .image class?

Where Next?

Popular Frontend topics Top

AstonJ
Sprinkles of JS, or full frontend frameworks? What do you use and why?
New
AstonJ
Inspired by @dbernheisel’s post here, which CSS framework do you use and why?
New
kokolegorille
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
New
AstonJ
Which WebAssembly language/s interest you? I just discovered AssemblyScript (portal | thread) which looks interesting! Here are some of...
New
mafinar
I (re-)realized I had the book “Modern CSS with Tailwind” bought, never read a page of it until today. With me being a fast reader and th...
New
EngineerHamziey
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
SynergyRob
I invented a game of double Chess called Synergy Chess. I am not a coder. I hired someone to write the program. People can play online fo...
New
riyajohnson
When it comes to selecting a framework for a development project, it’s crucial to make an informed decision. With so many options availab...
New
DevynClark
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 Top

AstonJ
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
New
PragmaticBookshelf
Free and open source software is the default choice for the technologies that run our world, and it’s built and maintained by people like...
New
PragmaticBookshelf
Learn from the award-winning programming series that inspired the Elixir language, and go on a step-by-step journey through the most impo...
New
Rainer
My first contact with Erlang was about 2 years ago when I used RabbitMQ, which is written in Erlang, for my job. This made me curious and...
New
PragmaticBookshelf
Rust is an exciting new programming language combining the power of C with memory safety, fearless concurrency, and productivity boosters...
New
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
DevotionGeo
The V Programming Language Simple language for building maintainable programs V is already mentioned couple of times in the forum, but I...
New
AstonJ
If you want a quick and easy way to block any website on your Mac using Little Snitch simply… File &gt; New Rule: And select Deny, O...
New
Fl4m3Ph03n1x
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