CODEWITHSUNDEEP
cssbootstrap-4
Cove
Cove

Reputation: 709

Bootstrap image auto resize doesn't works in left column

I have standard 3 column layout with similar img in left and right column. When I resize page, right image becomes smaller but left not. And middle container overflow left image.

Css for image resizing:

   img {
      display: block;
      max-width: 100%;
      height: auto;
    }

My full code is:

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Title</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    .logo_item {
      display: inline-block;
      margin-left: 2.5em;
      margin-right: 2.5em;
    }
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <!-- 2nd row -->
    <div class="row mt-4">
      <div class="brd_black col">
        <div style="position:fixed;">
          <a href="javascript:window.history.back();"><img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" /></a></div>
      </div>
      <div class="brd_black col-10">
        <div class="row">
          <div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
          </div>
        </div>
      </div>
      <div class="brd_black col">
        <div style="position:fixed;">
          <a href="faq.html"><img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" target="_blank" /></a></div>
      </div>
    </div>
  </div>
  </div>
</body>
</html>

But why?

Upvotes: 0

Views: 78

Answers (3)

Nethra
Nethra

Reputation: 609

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Title</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    .logo_item {
      display: inline-block;
      margin-left: 2.5em;
      margin-right: 2.5em;
    }
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    .bg_img
    {
      background: url('https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png')no-repeat center center;
      display: block;
      width: 20px;
      height: 20px;
      background-size: contain;
      float: left;
      position: fixed;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <!-- 2nd row -->
    <div class="row mt-4">
      <div class="brd_black col">
        <div>
          <a href="javascript:window.history.back();" class="bg_img"></a>
        </div>
      </div>
      <div class="brd_black col-10">
        <div class="row">
          <div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
          </div>
        </div>
      </div>
      <div class="brd_black col">
        <div>
          <a href="faq.html" class="bg_img"></a>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>
</html>

Upvotes: 2

Khalid Khan
Khalid Khan

Reputation: 3185

Remove position:fixed style from the div.
I have tried your code and removed your img tag styles and replaced it with the default img-fluid class of bootstrap-4 and it's working fantastic.

    <!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Title</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    .logo_item {
      display: inline-block;
      margin-left: 2.5em;
      margin-right: 2.5em;
    }

    .sticky {
      position: sticky;
      position: -webkit-sticky !important;
      top: 0;
      right: 0;
      left: 0;
      z-index: 1030;
      display: flex;
    }

    .stick_img{
      position: sticky;
      position: -webkit-sticky !important;
      top: 15px;

    }

  </style>
</head>
<body>
  <div class="container-fluid">
    <!-- 2nd row -->
    <div class="row mt-4">
      <div class="brd_black col sticky">
        <div>
          <a href="javascript:window.history.back();"><img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" class="img-fluid stick_img" /></a></div>
      </div>
      <div class="brd_black col-10">
        <div class="row">
          <div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3 text-center">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus sit amet leo feugiat venenatis. Donec mattis erat eget velit dapibus, at consequat nisi pretium. Nulla ut elementum ex, in rutrum neque. Integer eu blandit sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae pulvinar odio. Morbi fermentum dolor sapien, vitae semper est maximus non. Vestibulum bibendum aliquet lacinia. Nullam sollicitudin auctor metus vel pretium. Donec fermentum ligula suscipit metus varius dictum. Curabitur ultrices justo at arcu cursus, sit amet iaculis dolor dapibus. Morbi semper porta nunc. Aliquam rutrum congue nunc non facilisis.
          </div>
        </div>
      </div>
      <div class="brd_black col sticky">
        <div>
          <a href="faq.html"><img src="https://v1.iconsearch.ru/uploads/icons/crystalclear/64x64/folder_home.png" target="_blank" class="img-fluid stick_img" /></a></div>
      </div>
    </div>
  </div>
  </div>
</body>
</html>

Try this whole code, Hopefully it'll work

Upvotes: 1

Nethra
Nethra

Reputation: 609

remove position:fixed; style for your code.

Upvotes: 0

Related Questions