Menu
I'm using bootstrap and I have a row with two columns. One of the columns has one picture in it which should take up all of the space in the column. The column on the right has three rows in it with 2 pictures in each row. But so far I can't get the image on the left to resize correctly and just stays at a small fixed size. Here is the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom2.css" rel="stylesheet">
</head>
<body>
<div class="col-md-12">
<div class="row">
<h2>Recent</h2>
<div id="myGallery" class="col-md-7">
<a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a>
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-6"><a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a></div>
<div class="col-md-6"><a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a></div>
</div>
<br>
<div class="row">
<div class="col-md-6"><a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a></div>
<div class="col-md-6"><a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a></div>
</div>
<br>
<div class="row">
<div class="col-md-6"><a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a></div>
<div class="col-md-6"><a href="#"><img src="images/9-12,13 40.jpg" class="img-responsive"></a></div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
and my css
img
{
max-width:auto;
max-height:auto;
}
I have been able to set a minimum width for it like
.myClass img{
min-width: 775px;
}
but if the browser window size changes then it stays the same size and doesn't look as good.
Here is what it currently looks like
And it should look like this
How do I go about fixing this in the css? Thanks for the help!
797
To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.
Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.
how to stretch image in size using bootstrap. you have to set the width of image to 100%, for that you can use Bootstrap class "w-100". keep in mind that "container-fluid" and "col-12" class sets left and right padding to 15px and "row" class sets left and right margin to "-15px" by default. make sure to set them to 0.
Create responsive images by adding an . img-responsive class to the <img> tag. The image will then scale nicely to the parent element.
You should just set the image to have a width of 100%. That make the element take 100% of the width of the container it is inside:
img {
width: 100%;
}
Use Boostrap's img-responsive class.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
