CODEWITHSUNDEEP
imagebootstrap-5flex4.5image-enlarge
Nicolas
Nicolas

Reputation: 1

Bootstrap - image enlarged with flex

I have a problem an image which is enlarged but I don't why. I tried several manipulations but the div with "missions" id stays enlarged (I have finally to add a snippet :))

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Association Capucine - Gagner contre la leucémie</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body id="body">
  <header>
    <!-- Logos -->
    <div class="d-flex justify-content-around m-3">
      <div class="p-2"><img id="logo" href="#" src="img/logo.png" alt="Logo Capucine"></div>
      <div class="p-2"><img id="missions" src="img/missions.png" alt="Missions Capucine"></div>
    </div>
    </header>
</body>
<html>

Thanks per avdance

Upvotes: -2

Views: 50

Answers (1)

Rok Benko
Rok Benko

Reputation: 22880

Simply add Bootstrap class w-100 (i.e., width: 100%;).

See the snippet below.

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Association Capucine - Gagner contre la leucémie</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body id="body">
  <header>
    <!-- Logos -->
    <div class="d-flex justify-content-around m-3">
      <div class="p-2"><img class="w-100" id="logo" href="#" src="https://www.thesafaricollection.com/wp-content/uploads/2022/07/The-Safari-Collection-Hey-You-Giraffe-Manor-1.jpg" alt="Logo Capucine"></div>
      <div class="p-2"><img class="w-100" id="missions" src="https://www.thesafaricollection.com/wp-content/uploads/2022/07/The-Safari-Collection-Hey-You-Giraffe-Manor-1.jpg" alt="Missions Capucine"></div>
    </div>
  </header>
</body>
<html>

Upvotes: 0

Related Questions