Still brand new to CSS, so please be gentle ;). I have a grid setup like the following:
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x150" class="img-responsive">
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/150x150" class="img-responsive">
</a>
</div>
</div>
The problem is when I actually fill the src with an image, I want the image to actually compeltely "fill" the placeholder no matter what the image size is. I guess in other words, a ratio should be applied so it fills the 150x150? The width (max-width: 100%) is fitting, but the height is auto. I've tried adjusting height, width, max-height, etc. with no success.
I'm also new to bootstrap. I must have been messing with this longer than I should have but basically here is what I found works
You want to have a custom stylesheet that you load after bootstrap's css so you can make custom adjustments without destroying the original css. You can then make the adjustments:
.thumbnail-image {
overflow: hidden;
height: 150px;
}
.thumbnail-image > img {
width: 100%;
}
So then I sandwiched the image inbetween a div with the "thumbnail-image" class in the HTML.
<div class="row">
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image"><img src="http://placehold.it/150x150"></div>
</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-4">
<a href="#" class="thumbnail">
<div class="thumbnail-image"><img src="http://placehold.it/150x150"></div>
</a>
</div>
</div>
As column sizes adjust at the breakpoints you would have to do some similar adjustments regarding the custom height property of the custom .thumbnail-image class but other than that this is what I came up with!
Try adding height and width attributes within the image tag like so:
<img src="..." height="150" width="150">
Not sure how this'll interact with bootstrap's responsive image class. Best practice would be to actually insert an image which has the correct dimensions.
Related
I am working on an angular project where I am getting the data in image and title and location. I tried to make a responsive div but unable to make them in one size.
<div *ngFor="let company of companies" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
<div class="card">
<div class="card-content">
<div class="card-body py-0 text-center">
<input [checked]="true" type="radio" formControlName="scope" (click)="nextFormPostion(nextFormPostionName)" (change)="nextFormPostion(nextFormPostionName)" id="img{{company.scope}}" class="d-none imgbgchk" value="{{company.scope}}">
<label for="img{{company.scope}}">
<div class="row justify-content-center">
<div class="col-12" style="height: 6rem ; display:table-cell; vertical-align: middle;">
<img src="{{company.logo}}" class="mt-1 img-fluid mh-100" alt="Image 1">
</div>
<div class="col-12 mt-2" style="min-height: 3rem;font-size: 12px;text-transform: none;">
<span>{{company.company}}</span>
</div>
<div class="col-12 mt-1" style="min-height: 2.5rem;font-size: 12px;text-transform: none;">
<span>{{company.country}}</span>
</div>
</div>
<div class="tick_container">
<div class="tick"><i class="fa fa-check"></i></div>
</div>
</label>
</div>
</div>
</div>
</div>
company.logo is the image path and company.company is the name of the company. I want to make image in vertical and horizontal align center and if company name length is new line it change the size of all divs.
You don't need bootstrap exactly to do that you can use JavaScript to get the div side you want and apply as width + height.
Also you can use CSS with, for example:
width: 100%
The first thing you need to check if you have any border, margin, padding that is affecting your code. I don't know, I don't have enough information. But I believe it could be because Bootstrap puts automatic padding on .row
For this you can put
<div class="row g-0">
</div>
Bootstrap 5 - No gutters
Or if it is in another element, simply add the px-0 class that removes the padding from the widths.
I am having trouble with grid in bootstrap grid. I have empty spaces in a row. this is shown on desktop and on mobile is like .
The code which I am using is
<div class="row">
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book1.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book2.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book3.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book4.png" alt="">
</a>
</div>
<div class="col-xs-6 col-md-3 col-sm-4 portfolio-item">
<a href="#">
<img class="img-responsive" src="image/book image/book4.png" alt="">
</a>
</div>
</div>
I don't really know how I could fix that, so I hope somebody can give me some advice.
You have to set min-height for the columns since the columns have different heights.
.portfolio-item {
min-height: 200px;
}
Change 200px for a minimum that would fit the columns in their respective places.
This is due to different heights on your divs. You have a few possible fixes for this:
Set all divs to equal heights manually.
Use something like https://github.com/liabru/jquery-match-height to set the heights of divs for you. There are different settings you can use such as on a row per row basis.
Use flexbox grids. Unfortunately flexbox isn't widely available yet 😵
Use a mixture of flexbox with JavaScript like this http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback
make sure all the book images are same size...or just set min-height to "portfolio-item" class.
Just add class clearfix after every row
I have a div that looks like this:
<div class="main-div col-xs-12 col-md-6">
<div class="col-xs-6">
<a href="">
<img class="img-responsive" src="https://placehold.it/285x251">
</a>
</div>
<div class="content col-xs-6">
<h4>Header</h4>
<p>Paragraph test</p>
<div class="buttons">
<div class="btn btn-primary col-md-6">Add to cart</div>
<div class="btn btn-success col-md-6">View Item</div>
</div>
</div>
</div>
and I want that img-responsive class will determine the total height of the main div
So if it's will look like this:
http://jsfiddle.net/y9Let9dh/
so I want that max-height of a main-div class, will be as img-responsive height
and <p> of div class="content " will be overflow: hidden style
My problem that I have no idea how I get the height of img-responsive at any given time
My goal is also, to do
The buttons always in the bottom, parallel to the img
See JSFiddle. Are you looking way like this?
You need to set overflow: hidden to your main-div, wrap your content into some div (I called it cont-inner) and set position: absolute to him, because absolute positioned elements has not change parents height.
I have an image that overflows my row. I read online that clearfix prevents this from happening. But having applied this, my image appears as a very thin line with hardly anything visible. My code is visible below. How do I ensure that my image dynamically resizes itself within this container?
<div class="row">
<div class="col-sm-2 col-md-2 col-lg-2">
<img src="url" alt="A picture" id="heading-img" class="img-responsive">
</div>
<div class="col-sm-6 col-md-6 col-lg-6 col-sm-offset-2 col-md-offset-2 col-lg-offset-2">other things</div>
</div>
add class="img-responsive" if you're using bootstrap css.
How do I change the width of the <a> tag below exactly as the test_small.jpg image width?
<div class="row">
<div class="col-md-5">
<a class="fancybox thumbnail" href="/assets/images/gallery/test.jpg">
<img class="img-responsive" src="test_small.jpg">
</a>
</div>
<div class="col-md-7">
...
</div>
</div>
I tried using:
<a class="fancybox thumbnail" style="width: auto" href="/assets/images/gallery/test.jpg">
without success.
Thanks.
EDIT: http://www.bootply.com/PGsq7xJeOt
You could just add an auto width. You will need to specify display: block for this to take effect.
.fancybox.thumbnail {
display: block;
width: auto;
}
I'd add class to that a .. for example: .customThumbnail
HTML:
<a class="fancybox thumbnail customThumbnail" href="/assets/images/gallery/test.jpg">
<img class="img-responsive" src="test_small.jpg">
</a>
CSS:
a.customThumbnail {display: block; width: 200px;}
You can use any width here (within col-md-5), since your image is responsive - it will adjust.
Also, try resetting padding (as the "a" might have some padding around it).
a.customThumbnail {display: block; width: 200px; padding: 0}
Although, a JSFiddle would be the best :)
I have an active example on ToWho.
<div class="row">
<div class="col-md-5">
<a href="/assets/images/gallery/test.jpg">
<div class="content"> <!-- This div isn't necessary, but is helpful for organizing -->
<img class="img-responsive" src="test_small.jpg" alt="Small Images">
</div>
</a>
</div>
<div class="col-md-7"></div>
</div>
Why it's not working is hard to solve without a fiddle. The anchor shouldn't need anything special to make it take up the space of the div, especially since it's in a Bootstrap grid element.
Try to make a new class giving it width:100% or make it an inline style.
<div class="row">
<div class="col-md-5">
<img class="image-responsive" style="width:100%;" src="test_small.jpg"/> </div>
<div class="col-md-7">
...
</div>
</div>