I'm trying to get image fit with bootstrap column in a row proportionally within specified height 300px, i have tried so many ways but unfortunately its not fit with column width (my 1st image dimension is 262*380 and 2nd image dimension 546*380 and im using img-responsive class)
I need my image should be like this Expected
but im getting like this Actual
My HTML
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="grid">
<img src="https://static5.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lunch-5502ae26.jpg" class="img-responsive" alt="">
</div>
</div>
<div class="col-md-8">
<div class="grid">
<img src="https://static7.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lounge-0cd3d802.jpg" class="img-responsive" alt="">
</div>
</div>
</div>
My CSS
.grid {
height: 300px;
border-right: 4px;
}
.grid img {
height: 100%;
}
Try this HTML:
<div class="container">
<div class="row">
<div class="col-md-4 bg-cover grid" style="background-image: url(https://static5.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lunch-5502ae26.jpg)">
</div>
<div class="col-md-8 bg-cover grid" style="background-image: url(https://static7.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lounge-0cd3d802.jpg)">
</div>
</div>
</div>
with this CSS:
.grid {
height: 300px;
}
.grid img {
height: 100%;
}
.bg-cover {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 300px
}
Related
I'm using a downloaded theme from a site and it had multiple versions of homepages. I'm using one of them but in the homepage there were set sizes for the images.
I have a dynamic site so the images will be loaded automatically. I'm trying to get rid of this stuck image size but it refuses, a single image is taking all over the container.
I've deleted all the code in that section. It was a container split into 3 parts, a side bar , middle part and right part. Because I won't know the sizes of my images I left the sidebar as is and I joined the middle and right part to be together. Now whenever I add an image it takes over the whole container and the other images just load under it which lead the container to drag more.
This is what my code looks like
.container {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-auto-rows: 100px 300px;
grid-gap: 10px;
}
.gallery_container .gallery_Item {
width:100%;
height: 100%;
position: relative;
}
4.gallery_container .gallery_Item .image {
width: 100%;
height: 100%;
overflow: hidden;
}
.gallery_container .gallery_Item .img {
width:100%;
height: 100%;
object-fit: cover;
}
<div class="container">
<div class="gallery_container">
<div class="gallery_Item">
<div class="imgInGallery">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTPNy2qphPH0eDMdpoyfLsPz9D-pc6ntnktcw&usqp=CAU" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item">
<div class="imgInGallery">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVy3Qlw07-BSIBiWkNRxZEYSHJKqQgvynzwQ&usqp=CAU" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item">
<div class="imgInGallery">
<img src="https://pqina.nl/media/cat.jpeg" />
</div>
</div>
</div>
<div class="gallery_container">
<div class="gallery_Item">
<div class="imgInGallery">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmK_e1W8uKhev51wmsAZVqNO0PVhOl9u2o3w&usqp=CAU" />
</div>
</div>
</div>
</div>
I am working with Bootstrap 4 and am trying to have a grid of 4 images, 2 on top and 2 on bottom. I am using the img-fluid class but the image resizes based on the width only making the image height too large and it is getting cut off. I tried setting max-height: 100% but that didn't work.
What's going wrong?
.images-container {
height: 95vh;
}
.nav-button {
width: 100%;
height: 50%;
margin: auto;
font-size: 5em;
color: black;
}
.footer-container {
text-align: center;
}
.bottom-nav-box {
font-size: 1.5em;
margin: 0;
}
.sim-image {
max-height: 100%;
}
i {
margin: auto;
}
body {
height: 100%;
}
html {
height: 100%;
}
footer {
height: 5vh;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-10 h-100 center-container">
<div class="row images-container">
<div class="row top-images-row h-50">
<div class="w-50 d-inline-block image-div">
<img src="https://lorempixel.com/875/656/" class="sim-image" id="simulatorImageTopLeft">
</div>
<div class="w-50 d-inline-block image-div" id="simulatorImageTopRight">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageTopRight">
</div>
</div>
<div class="row bottom-images-row h-50">
<div class="col image-div center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomLeft">
</div>
<div class="col image-div center-block text-center">
<div class="row">
<div class="col center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
</div>
<div class="col center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
</div>
</div>
</div>
</div>
</div>
</div>
Not 100% sure I'm interpreting the question correctly, but if you want a 2×2 grid of images then you should just be able to do it relatively quick like this;
html:
<div class="panel">
<img src="blah" />
<img src="blah" />
<img src="blah" />
<img src="blah" />
</div>
css:
.panel {
width = whateversizeyouwant;
height = whateversizeyouwant;
display: flex;
flex-wrap: wrap; //the flex stuff should make it display 2×2
}
.panel > img {
width: 50%;
height: 50%;
}
That should work for any set of 4 images.
If you want them to stay the same aspect ratios then under .panel > img set height: auto. Keep in mind this won't give you a perfect square, and the size of the panel div will impact how the images can be sized.
I have differently sized images, but want to make them look equal by width and height on the page. What I did:
HTML
<div class="col-lg-6">
<img src = "assets/img/101.jpg" alt="Null" />
</div>
CSS
#images img {
width: 100%;
padding-bottom: 4em;
position: center;
}
But they look like that:
They have different height.
How to make it equal?
Probably I need to crop them by height and center without changing the width. Is it possible?
Explanation from the comments
I have suggested that it will probably be nice to crop them, not resize. Center and crop to the size of smaller ones.
To gain more control over your images it's best to switch to background images. You can then use background-size: cover to fill out the div.
HTML
<div class="col-lg-6">
<div class="image-holder" style="background-image: url('assets/img/101.jpg');">
</div>
</div>
<div class="col-lg-6">
<div class="image-holder" style="background-image: url('assets/img/101.jpg');">
</div>
</div>
CSS
.image-holder {
background-size: cover;
background-position: center center;
height: 400px;
width: 100%;
}
If your images are just static assets it's better to include the image reference in css.
You can't set both height and width at the same time for an image- it will stretch them out. Have made it a 2-column flexbox along with col-lg-6 as per requirement.
See demo below:
.box {
border: 1px solid #ddd;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 50%;
min-width: 200px;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.col-lg-6.box {
padding: 15px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" />
<div class="container">
<div class=" col-lg-6 box">
<img src="http://placehold.it/150x100" alt="Null" />
</div>
<div class=" col-lg-6 box">
<img src="http://placehold.it/75x75" alt="Null" />
</div>
<div class=" col-lg-6 box">
<img src="http://placehold.it/150x50" alt="Null" />
</div>
<div class=" col-lg-6 box">
<img src="http://placehold.it/150x150" alt="Null" />
</div>
</div>
I'm struggling on how I will code to create a two vertical images and is it possible to lessen the height of the larger image without lessen the width? because I need to fit it on col-md-8 any thoughts about this?
this is the image I need to make.
Click here
HTML and CSS code:
.img-big{ height: 100%;width: 100%; }
<div class="row col-md-8">
<img class="row img-big img-responsive" src="/assets/icons/people-crowd-child-kid-large.jpg"></div>
</div
the above code is what I've used to make the bigger image beside image 2 and 3. the dimension of the large image is 900x767
You can use the flexbox property to achieve what you want and set the image as background.
body, html {
margin: 0;
padding: 0;
color: white;
}
.container {
height: 767px;
display: flex;
}
.left {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 1;
}
.right {
display: flex;
flex-direction: column;
flex: 0 0 50%;
}
.one {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 50%;
}
.two {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
background-size: cover;
flex: 50%;
}
<div class="container">
<div class="left">Left image</div>
<div class="right">
<div class="one">First image</div>
<div class="two">Second image</div>
</div>
</div>
In Bootstrap 5, you can use d-grid gap-x. For example:
HTML
.content {
background-color: transparent;}
.content .left, .content .right {
float: left;}
.full-width-band-hd {
margin-top: -35px;}
.txt-yellow {
color: var(--bs-yellow);}
<section class="container-lg">
<div class="content row">
<h2 class="txt-yellow full-width-band-hd">Head</h2>
<!-- Left Side -->
<h6 class="text-yellow">H6 head</h6>
<h3 class="text-yellow">H3 head</h3>
</div>
<!-- style in content row will become a class later-->
<div class="content row" style="height: 642px;">
<div class="col-md-4 left d-grid gap-3">
<div class="">
<img src="image1" width="100%" height="auto" alt="fp1">
</div>
<div class="">
<img src="image2" width="100%" height="auto" alt="fp2">
</div>
</div>
<!-- End of Left Side -->
<div class="col-md-8 left">
<div class="">
<img src="image3" width="100%" height="auto" alt="fp3">
</div>
</div>
<!-- End of col-md-8 -->
</div><!-- content row -->
</section>
You should format your code like below:
<div class="row">
<div class="col-md-8">
<img class="img-big img-responsive" src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
</div>
<div class="col-md-4">
<img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
<img src="https://en.apkshki.com/storage/5/icon_5dcfce7f86906_5_w256.png"></div>
</div>
</div>
As you can see the two images at the bottom in col-md-4 if you spread the width 100% the next image will drop below.
You shouldnt really have a class with both a row and a col-md in the class name. (See http://getbootstrap.com/css/)
With regards to reducing the height and not the width are you not able to crop the image down on Paint or Photoshop and upload the image with the correct height?
I'm trying to achieve the following layout for a search result box. Specifically a 100% width and height image that on the right has two stacked containers that equals the height of the image, each with differing background colours that are butted up right against the image.
All attempts to achieve this simple layout are failing miserably. The issue I keep hitting is the when using something like:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
The image doesn't quite fill the col-md-3 column completely and thus you see the column's background.
What's the best way to do this?
Bootstrap columns have a padding of 15px by default. Also the image width has to be 100%. You can do something like this:
<div class="search-result-box">
<div class="row">
<div class="col-md-3" style="padding: 0;">
<img src="" class="img-responsive" style="width: 100%;">
</div>
<div class="col-md-9">
...
</div>
</div>
</div>
Jsfiddle: http://jsfiddle.net/HM4gE/1/
I wouldn't use Bootstrap columns though to achieve this since you seem to have some fixed heights and widths for columns. Instead I would do it like this (given that the height and the width of the image is always 196px): http://jsfiddle.net/HM4gE/2/
Check browser support for calc() before using it: http://caniuse.com/calc
Here a possible answer:
<div class="search-result-box">
<div class="row">
<div class="col-md-3">
<img src="" class="img-responsive" style="height: 196px;" height="196" />
</div>
<div class="col-md-9">
<div class="title">Title</div>
<div>Link1</div>
</div>
</div>
</div>
.search-result-box {
display: table;
width: 100%;
}
.row {
display: table-row;
}
.row > * {
display: table-cell;
}
.col-md-3 {
background: orange;
width: 260px;
height: 196px;
}
.col-md-9 {
vertical-align:top;
background: grey;
}
.title {
background: #ccc;
width: 100%;
height: 150px;
}
http://jsfiddle.net/junkie/fAPQ6/2/