Question 43791 in Html Question posted in
Some basic documentation can be found here.

Filling an image to a column such that it shows till the first page only and is completely filled within the column irrespective of its dimensions – Html

peoject.jpg

I created a div with 2 columns using bootstrap and trying to fit this image in the right column such that it shows just up to the first page. I tried the following code:

img {
  height: 100vh;
  object-fit: cover;
}

The above code helps me to show the image just up to the first page but it’s not filled completely in the right column even after using the css property object-fit: cover; How should I do it? Please someone help!

Image is provided above!

I want the image to be filled completely in the right column irrespective of its dimensions

Tags:

2

Answers


  1. 0

    –edited —
    Based on the code below, the image is filling up normally after I added width: 100%.

    If you wanted the image extra space to be gone, I added margin and padding =0 to the column that the image is inside.

    I also added a orange border to mark the image territory.

    <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<style>
div {
   border: 2px dotted red;

}
img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  border: 3px solid orange;
 
}
.col-md-6{
  margin: 0;
  padding: 0;
}

</style>

<body>

<div class="container bg-warning">
  <div class="row">
    <div class="col-md-6 bg-info">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-md-6 nopadding">
     <img src="56hZ1.jpg" class="img-fluid" alt="Flowers in Chania">
     </div>
  </div>
</div>

</body>
</html>
    Login or Signup to reply.
  2. 0

    try this:

    .row{
  margin-right: 0 !important;
  margin-left: 0 !important;
  height: 100px; /* for exaple */
  text-align: center;
}

.col-6{
  padding-right: 0 !important;
  padding-left: 0 !important;
  border: 1px solid black; /* for exaple */
}

.col-6.img{
  background-image: url(https://i.stack.imgur.com/56hZ1.jpg);
  background-size: contain;  /* can use 'cover' */
  background-position: center;
  background-repeat: no-repeat;
}
    <!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="row">
      <div class="col-6 img"></div>
      <div class="col-6">Column 2</div>
    </div>
  </body>
</html>

    Or did you mean this:

    .row{
  margin-right: 0 !important;
  margin-left: 0 !important;
  height: 100px; /* for exaple */
  text-align: center;
}

.col-6{
  padding-right: 0 !important;
  padding-left: 0 !important;
  border: 1px solid black;
  height: 100%;
}

.col-6 .img{
  width: 100%;
  height: 100%;
}
    <!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <div class="row">
      <div class="col-6"><img class ="img" src="https://i.stack.imgur.com/56hZ1.jpg" /></div>
      <div class="col-6">Column 2</div>
    </div>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search