Twitter Bootstrap Question posted in

How can I make images not size outside of its parent?-Twitter bootstrap

I am trying to create a container on a site that.
Inside this container I want 3 rows, each row has an image. The image itself it quite large, however I wanted to image to be restricted to the size of it’s parent. How, even with a massive trail of h-100, the images when rendered are nearly 5 times the size of the viewport.

Here is my progress.

To clarify I do not want the images to overflow, I need them all to shrink to not go outside the parent

<!-- Bootstrap 4.1.x / Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<!-- Body -->
<div id="main-container" style="opacity: 0.5;">
  <div class="container-fluid" style="position: fixed; bottom: 7%; height: 70vh;">
    <div class="row h-100">
      <div class="col h-100">
        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>

        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>
        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>
      </div>
    </div>
  </div>
</div>
Tags:

6

Answers


  1. 0

    try this:

    <div class="row h-100">
  <img class="rounded-circle img-fluid" style="max-height: 100%; max-width: 100%;" src="https://www.sepsis.org.nz/wp-content/uploads/placeholder.png" style="border: .2rem solid #1a4579;">
</div>
    Login or Signup to reply.
  2. 0

    use add this css property to image this way or externally as your preference.

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Head-->
<head>
    <style>
        img{
            overflow:hidden;
            object-fit:contain;
        }
    </style>

</head>

<!-- Body -->
<div id="main-container" style="opacity: 0.5;">
  <div class="container-fluid" style="position: fixed; bottom: 7%; height: 70vh;">
    <div class="row h-100">
      <div class="col h-100">
        <div class="row " style="overflow:hidden">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>

        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>
        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Slight changes in HTML structure and added CSS.

    #img-wrapper {
  width: 300px; /* or in percentage*/
}

#img-main-row {
  overflow-y: scroll;
}
    <!-- Bootstrap 4.1.x / Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<!-- Body -->
<div id="main-container" style="opacity: 0.5;">
    <div class="container-fluid" style="position: fixed; bottom: 7%; height: 70vh;">
        <div id="img-main-row" class="row h-100">
            <div class="col-12">
                <div class="img-wrapper">
                    <img class="rounded-circle img-fluid" width="100%" height="auto"
                        src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
                </div>
            </div>

            <div class="col-12">
                <div class="img-wrapper">
                    <img class="rounded-circle img-fluid" width="100%" height="auto"
                        src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
                </div>
            </div>
            
            <div class="col-12">
                <div class="img-wrapper">
                    <img class="rounded-circle img-fluid" width="100%" height="auto"
                        src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
                </div>
            </div>

        </div>
    </div>
</div>
    Login or Signup to reply.
  4. 0

    Try this:

    <head>
    <style>
        .container-fluid .row {
            height: calc(100%/3) !important;
        }
        img {
            max-height: 100%;
            object-fit: cover;
        }
    </style>

</head>

<!-- Body -->
<div id="main-container" style="opacity: 0.5;">
    <div class="container-fluid" style="position: fixed; bottom: 7%; height: 70vh;">
        <div class="row">
            <div class="col">
                <div class="row " style="overflow:hidden">
                    <img class="rounded-circle img-fluid" width="100%" height="auto"
                        src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
                </div>

                <div class="row ">
                    <img class="rounded-circle img-fluid" width="100%" height="auto"
                        src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
                </div>
                <div class="row ">
                    <img class="rounded-circle img-fluid" width="100%" height="auto"
                        src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
                </div>
            </div>
        </div>
    </div>
</div>
    Login or Signup to reply.
  5. 0
    1. The parent of the image (row) have no specific height to limit the image within it.
    2. Set the max-height of the images to 100%.

    Try this:

    <style>
    .imgParent {
        height: 100px;
    }

    img {
        max-height: 100%;
    }
</style>

    And

    <div class="row imgParent">
     <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
</div>
    • If you want to keep the aspect ratio of images remove width="100%" height="auto" from images.
    Login or Signup to reply.
  6. 0

    I based the example on the fact that you wish to keep always the images width at a minimum width of 100%, if you dont want that, I can still change it.

    Process:

    I added the class overflow to your .col div that contain all the row image.

    Then the goal is to hide your image height with overflow:hidden and then centering image with position:absolute as below:

    (You might have some problem with js as it is using position:absolute please provide working example for more.)

    .overflow{
 overflow:auto;
}
.overflow .row{
  position:relative;
  overflow:hidden;
  height:100%;
}

.overflow img{
  min-width:100%;
  position:absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <!-- Bootstrap 4.1.x / Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<!-- Body -->
<div id="main-container" style="opacity: 0.5;">
  <div class="container-fluid" style="position: fixed; bottom: 7%; height: 70vh;">
    <div class="row h-100">
      <div class="col h-100 overflow">
        <div class="row">
          <img class="rounded-circle img-fluid" width="100" height="auto" src="https://via.placeholder.com/1920x1080.png" style="border: .2rem solid #1a4579;">
        </div>

        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1820x1080.png" style="border: .2rem solid #1a4579;">
        </div>
        <div class="row ">
          <img class="rounded-circle img-fluid" width="100%" height="auto" src="https://via.placeholder.com/1720x1080.png" style="border: .2rem solid #1a4579;">
        </div>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search