I was trying to put same size of image for all card but some images has already small height then How can I fix that?
<div class="row">
<div class="col">
<div class="card h-100" style="width: 18rem;">
<img class="card-img-top" src="/assets/prewedding/pic1.jpg">
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 18rem;">
<img class="card-img-top" src="/assets/prewedding/pic2.jpg">
</div>
</div>
</div>
You just need to set the img to cover the container, like
.card > img {
width: 100%;
height: 100%;
}
Related
Using Bootstrap grids, I have split the full page into two rows (25% height and 75% height). I like an image to be contained inside the first 25% row in a responsive manner. I like to avoid setting a fixed height and want the image to occupy as much height as possible. I have tried following most answers in similar previous questions 1, 2 and 3, but none of them are working.
What I did till now: I tried using object-fit, but could not get it to work. Also it appears the parent div display property set to flex is the issue. But I am not able to find an alternative. Below is code and also please find MCVE in jsFiddle [link].
<div class="container-fluid h-100">
<div class="row h-25">
<div class="col">
<img src="https://getbootstrap.com/docs/5.0/assets/img/bootstrap-icons.png"
class="img-fluid" alt="Responsive image">
</div>
</div>
<div class="row h-75">
<div class="col">
75 Percent Height
</div>
</div>
</div>
html,body {
height: 100%;
}
I hope this is what u are expecting. I have added h-100classes to img tag and h-100 to img parent col tag
<div class="container-fluid h-100">
<div class="row h-25">
<div class="col h-100">
<img src="https://getbootstrap.com/docs/5.0/assets/img/bootstrap-icons.png" class="img-fluid h-100" alt="Responsive image">
</div>
</div>
<div class="row h-75">
<div class="col">
75 Percent Height
</div>
</div>
</div>
.row {
outline: 3px solid rgba(0, 0, 255, 1);
}
html,
body {
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="container-fluid h-100">
<div class="row h-25">
<div class="col h-100">
<img src="https://getbootstrap.com/docs/5.0/assets/img/bootstrap-icons.png" class="img-fluid h-100" alt="Responsive image">
</div>
</div>
<div class="row h-75">
<div class="col">
75 Percent Height
</div>
</div>
</div>
PLEASE HELP !!!
I am using bootstrap cards to make a section of my website.I am facing issue in circle image of the cards.I want my images do not get stretch when i put them in image circle of card.Is there a way i can zoom in middle of the image while showing it in circle or am i doing something wrong in my scss code ??
Here is the issue:
Expected Output:
Dimensions of these Images:
910x592 , 1230x802 , 1230x794
Bootstrap Code:
<section class="about-cards-section">
<div class="container">
<div class="row">
<div class="col-sm-4 card-wrapper">
<div class="card card-style" >
<img class="card-img-top rounded-circle circle-image" src="img/about/card-one.png" alt="Card image cap">
<!-- <img src="img/about/card-one.png" class="img-circle" alt="Cinque Terre" width="250" height="236"> -->
<div class="card-body">
<h3 class="card-title">Our Facilities</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
<div class="col-sm-4 card-wrapper">
<div class="card card-style">
<img class="card-img-top rounded-circle circle-image" src="img/about/card-two.png" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Our Research</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
<div class="col-sm-4 card-wrapper">
<div class="card card-style">
<img class="card-img-top rounded-circle circle-image" src="img/about/card-three.png" alt="Card image cap">
<div class="card-body">
<h3 class="card-title">Our Expertise</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
</div>
</div>
</section>
SCSS of the Cards Section:
.about-cards-section{
.card-wrapper{
margin: 5% 0;
.card-style{
text-align: center;
border-radius: initial;
border: initial;
.circle-image{
width: 60%;
height: 200px;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.card-title{
text-transform: uppercase;
letter-spacing: 1.1px;
}
.card-text{
font-family: MerriweatherRegular;
font-size: 22px;
line-height: initial;
}
}
}
The way I see it, you just need to adjust the width, height of .circle-image class and add object-fit: cover; property. But since you're using Bootstrap we can minimize your css using the pre-defined class in BS4
Example:
.card-wrapper {
margin: 5% 0;
}
/* You can adjust the image size by increasing/decreasing the width, height */
.custom-circle-image {
width: 20vw; /* note i used vw not px for better responsive */
height: 20vw;
}
.custom-circle-image img {
object-fit: cover;
}
.card-title {
letter-spacing: 1.1px;
}
.card-text {
font-family: MerriweatherRegular;
font-size: 22px;
line-height: initial;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="about-cards-section">
<div class="container">
<div class="row">
<div class="col-sm-4 card-wrapper">
<div class="card border-0">
<div class="position-relative rounded-circle overflow-hidden mx-auto custom-circle-image">
<img class="w-100 h-100" src="https://source.unsplash.com/910x592" alt="Card image cap">
</div>
<div class="card-body text-center mt-4">
<h3 class="text-uppercase card-title">Our Facilities</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
<div class="col-sm-4 card-wrapper">
<div class="card border-0">
<div class="position-relative rounded-circle overflow-hidden mx-auto custom-circle-image">
<img class="w-100 h-100" src="https://source.unsplash.com/1230x802" alt="Card image cap">
</div>
<div class="card-body text-center mt-4">
<h3 class="text-uppercase card-title">Our Research</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
<div class="col-sm-4 card-wrapper">
<div class="card border-0">
<div class="position-relative rounded-circle overflow-hidden mx-auto custom-circle-image">
<img class="w-100 h-100" src="https://source.unsplash.com/1230x794" alt="Card image cap">
</div>
<div class="card-body text-center mt-4">
<h3 class="text-uppercase card-title">Our Expertise</h3>
<p class="card-text">A short caption detailing an aspect of the brand which is worth mentioning.</p>
</div>
</div>
</div>
</div>
</div>
</section>
*{
box-sizing: border-box;
}
.results__item{
float: left;
width: calc(100%/3 - 40px/3)
}
.results__item:nth-child(3n-1){
margin-left: 20px;
margin-right: 20px;
}
.results__item__img-wrapper{
overflow: hidden;
}
.results__item__img-wrapper img{
width: 100%;
height: calc(100%/3 - 40px/3 + 90px)
}
.results__item__content{
word-wrap: break-word;
}
<div class="results">
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product1 Product1 Product1 Product1 Product1 Product1 Product1 Product1</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
<div class="results__item">
<div class="results__item__img-wrapper">
<img src="https://cdn09.nnnow.com/web-images/medium/styles/071FYGE4ZRM/1473831055127/1.jpg" alt="">
</div>
<div class="results__item__content-wrapper">
<div class="title">Product2</div>
<div class="price">$122.00</div>
</div>
</div>
</div>
I have created a grid layout. When the content of one item is more, the height of the row is not adjusting accordingly. How can I accomplish that?
Note: I dont want to use javascript for this. I am sure, this is possible with CSS
http://jsbin.com/kopatojiho/1/edit?html,css,output
Wrap every three images with a container. This way, you will have them all stack correctly beside each other as you can see on this image:
Also make sure to clear the collapsing on each of the containers you'll add as well, as they are collapsed because of the floated images. I normally use overflow: auto for this, but check this SO post for more ways to do it.
We're using materialize cards to display images on our site. The images are user uploaded, so they come in all different sizes (though they have to be greater than 250px).
We're able to maintain the aspect ratio of the images, which is great, but we don't know how to do that while making the cards on each row the same height. That's our goal- to get the cards to be the same height (in a responsive way) while maintaining the aspect ratio of the images inside the cards.
We've been messing with this all day without getting very far. Any help is much appreciated.
HTML:
<div class="row text-center">
<div class="col-xs-12 col-md-4 col-sm-12 test">
<div class="card" ui-sref='forsaleitem({type:"interior"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator" alt="Cinque Terre">
</div>
<div class="card-content">
<h5 class='text-center'>Interior</h5>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-sm-12 test">
<div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator" alt="Cinque Terre">
</div>
<div class="card-content">
<h5 class='text-center'>Drivetrain</h5>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-sm-12 test">
<div class="card" ui-sref='forsaleitem({type:"performance"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" alt="Cinque Terre">
</div>
<div class="card-content">
<h5 class='text-center'>Performance</h5>
</div>
</div>
</div>
</div>
CSS:
.card {
position: relative;
background-color: #f4f4f4;
// margin: 10px auto;
height: 100%;
box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.7);
}
.card {
height: 100%;
}
.card .card-image img {
//object-fit: contain !important;
}
Use Media Queries to set the width/height depending on the size of the screen. Example in JS Fiddle: https://jsfiddle.net/3yegzwex/
HTML:
<div class="row text-center">
<div class="col-xs-12 col-md-4 col-sm-12">
<div class="card" ui-sref='forsaleitem({type:"interior"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
</div>
<div class="card-content">
<h5 class='text-center'>Interior</h5>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-sm-12">
<div class="card" ui-sref='forsaleitem({type:"drivetrain"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
</div>
<div class="card-content">
<h5 class='text-center'>Drivetrain</h5>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 col-sm-12">
<div class="card" ui-sref='forsaleitem({type:"performance"})'>
<div class="card-header card-image waves-effect waves-block waves-light">
<img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226">
</div>
<div class="card-content">
<h5 class='text-center'>Performance</h5>
</div>
</div>
</div>
</div>
CSS:
.card {
text-align: center;
}
#media (max-width: 990px) {
.resizeimg {
height: auto;
}
}
#media (min-width: 1000px) {
.resizeimg {
width: auto;
height: 350px;
}
}
Do the images really have to be inline? Or can they be set as background-image (since they are user uploaded)? If so, you can set the background-size property to cover to address the problem. Also because object-fit is not widely supported (yet).
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't
get squished). The image "covers" the entire width or height of the
container. When the image and container have different dimensions, the
image is clipped either left/right or top/bottom.
Source: MDN
See this updated JSFiddle for the demo. The padding-bottom can be altered to a percentage for your needs. Try to change it and see what it does.
Inline images
If the images do have to be inline, you can apply this solution:
.card-image {
width: 100%;
padding-bottom: 50%;
overflow: hidden;
position: relative;
}
.card-image img {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
The image will be pushed inside the .card-image and stretched to its width that's needed. See this JSFiddle for the demo. The padding-bottom can be altered to a percentage to your needs.
I'm trying to make a grid of Boostrap unevenly sized thumbnails. But some thumbnails are uneven, resulting in huge gaps between some rows.
I don't have any styling on the thumbnails.
Is there a way to fix it without adding something like Masonry/Isotope/Salvattore?
You can use two <div> or two .row tags like this:
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<p>Thumbnail caption</p>
</div>
</div>
</div>
</div>
For more info visit Example: Stacked-to-horizontal.
The cleanest way to fix your layout is to use a masonry type of layout. It will allow for the smoothest look and be a very fluid and responsive layout when dealing with mixed sized media. Though if you are in complete control of the data/images being placed on the site I would suggest creating each image to be identical in size and type. If you would like I can provide an example I have created using a masonry type of layout with thumbnails and Bootstrap.
Edit to add example code:
/* CSS styles */
.row {
-moz-column-width: 12em;
-webkit-column-width: 12em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
column-width: 12em;
column-gap: 1em;
column-fill: balance;
width: 100%;
}
/* Outer div block */
.section-block {
display: block;
padding: .25rem;
width: 100%;
}
/* Inner div block */
.section-item {
position:relative;
display: inline-block;
width: 100%;
}
.section-item img{
width: 100%;
}
//Wrapper for each img you are adding
<div class='section-block'>
<div class='section-item'>
<div>
<a href='#' class='thumbnail' data-toggle='modal' data-target='#id'>
<img src='/imgs/image.jpg'>
<p class='caption'>Image Caption</p>
</a>
</div>
</div>
</div>
I used this in conjunction with php to get all my images from a db then I looped over each image and echo'd to the page with the above syntax. This should work without having to use any additional js libraries beyond what you are using for bootstrap. This gives you a very responsive masonry style of layout that works in modern browsers.