I am using a div tag in code as shown below:
<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive">
</div>
The user can upload any kind of image and have it displayed here. I want to fit the image inside of the div, meaning specifically that I need to cover the full div using that image as it's resized.
I am using Bootstrap 3.3.7. Please advise.
Just add you images width to 100%.
But as you are saying user will upload various kind of images, so can use object-fit property.
Add the CSS like this:
.fit-image{
width: 100%;
object-fit: cover;
height: 300px; /* only if you want fixed height */
}
<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-responsive fit-image">
</div>
You will find the details about object-fit and object-position here : https://css-tricks.com/on-object-fit-and-object-position/
For Bootstrap 4
<div class="col-sm-6 col-md-6 col-lg-4">
<img src="images/dummy_image.png" class="img-fluid">
</div>
bootstrap.css
.img-fluid {
max-width: 100%;
height: auto
}
It is safe to assume that by fitting you mean covering all of the width. This is because
You typically do not know the height just by using col-sm-6 or col-md-6 or col-lg-4.
There is a huge probability of loss in aspect ratio of the image if you try to resize it according to your own will.
Use <img src = "images/dummy_image.png" class = "img-responsive" width = "100%" /> for fitting the column. This will fit your image width-wise into the column and will automatically modify the height (keeping the aspect ratio in mind), so you do not have to worry about image getting illogically resized.
Related
I developed an image gallery.
My problem is that I am using 100% height and sometimes the image stretches, ending up losing quality.
Is there a way to place the image in the center of the box without stretching it and in the center if it is not tall enough to fill the box completely?
Demo
My code
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="row">
<div class="drop dropp">
<div class="abc">
<ngb-carousel style="outline: none;" id="carousel" #carousel *ngIf="data" data-interval="false"
data-ride="carousel" data-pause="hover" (slide)="change($event)">
<ng-template *ngFor="let imgIdx of data; let i = index" [id]="i" ngbSlide>
<div class="picsum-img-wrapper">
<img [src]="imgIdx.image" style="border-radius: 8px; object-fit: fill;" class="img-responsive">
</div>
</ng-template>
</ngb-carousel>
</div>
</div>
<div class="row">
<div class="Upcard" *ngFor="let imgIdx of belowImageData; let i = index">
<img class="img-responsive" [src]="imgIdx.image" style="width: 100%; object-fit: fill; height: 100%; border-radius: 8px;">
</div>
</div>
</div>
</div>
**My Problem **
As you can see in the image, it fills the whole box but is deformed :( I want it not to lose quality and if it doesn't have enough height, stay centered on the box. I want the box to have a fixed height.
If you don't care about the old browsers you can use object-fit property on the img directly.
for example:
object-fit: cover;
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Otherwise you can add an empty div, give it the full size of the box, and use the image as a background of that div. Then use background-size property.
Hope it helps.
I have tested the code, you can try adding the below code in css.edit and take a look
.img-responsive {
object-fit: contain; height:200px!important;
}
or to need all images to fit properly you have to remove the div global height 100 percentage. and set the height specific for each div. so you don't need height parameter in .img-responsive class.
I have had a landing page built for me which is fairly simple layout. But the problem is the Banner Photo is swamping the page and I have to scroll to see completed page. Is there an adjustment I can make to HTML and/or CSS to reduce the height of the banner photo by about a third?
There are a lot of different approaches of doing this. I'll just show you one, that should perfectly fit your current page and needs.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 d-flex align-items-end overflow-hidden banner-image-container">
<img class="img-responsive" src="img/top-banner.jpg" width="100%">
</div>
(Inside your <style tag:)
.overflow-hidden {
overflow: hidden;
}
.banner-image-container {
max-height: 400px;
}
What I did is to limit the container around your image to a maximum height of 400px. Because your image is bigger then that, I added overflow: hidden; to the container, so it will cut the rest of the image off. Now your main focus in the image will be the building I guess. So I did move it all the way to the top with d-flex align-items-end.
I am trying to create a column that is separated into 2 nested columns. They both should be images that cover the entire height and width of their respected columns. However, for some reason the images go over the div that contains them.
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<img class="fitimages" src="./images/pic1.jpg">
</div>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
<img class="fitimages" src="./images/pic2.jpg">
</div>
.fitimages{
max-width: 100%;
max-height: 100%;
}
I used max-width and max-height so that they would surround the parent div but for some reason the left image doesn't fill the entire width and height while the right one goes over it.
give your img this style : object-fit: cover;
This is visual demonstration: Image
I'm trying to put in my laptop column(col-md-8) second column, but when I try, the other one went under the column of the laptop, how can I put a second(col-md-6)column inside a laptop column, and that column laptop still has its full size.
Do you want like this? It's a very short and a messy description you have. So I hope i'm right.
<div class="row">
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-md-6 col-sm-6">
Laptop Image
</div>
</div>
</div>
</div>
"col-md-8 col-sm-12" classes will keep your column content as you like in tablet view+desktop view but when it becomes smaller like smartphone view, it will expand to the column to full width and you will still able to see your stuff inside of the laptop column.
Please read the bootstrap documentation from here. Anything else you want quick google will fix your issues or we're here at stackoverflow to help you out. :)
Update
This is what you want isn't it?
https://jsfiddle.net/5jrt314r/2/
Now Whatever goes inside of that .inside class will depend on the laptop image size you have. It will automatically horizontally and vertically center based on the .laptop class you have.
You said you want it responsive so you have to:
Keep your laptop element aspect ratio the same as the image.
Have a screen element that will always fill laptop's screen even if laptop image size changes due to it filling parent element.
If I am right you want this:
HTML:
<div class="row">
<div class="col-xs-8 laptop">
<div class="row">
<div class="col-xs-offset-3 col-xs-9 screen">
This column need to go in laptop screen
</div>
</div>
</div>
</div>
CSS:
.laptop {
background: url('http://devel0p.com/damir/wp-content/themes/helium/images/portofolio/macbook.png');
background-size: 100%;
background-repeat: no-repeat;
/* Padding will keep element aspect ratio so we always show image in it's original aspect ratio */
padding-bottom: 89.32%;
}
.screen {
background: red;
/* Make sure this element is always the size of the screen */
padding-bottom: 64%;
}
I calculated image aspect ratio to be 89.32~% by dividing width by height which is respectively 2084px and 2333px.
Here is a codepen example http://codepen.io/anon/pen/aNqKZL
UPDATE
In the first example .screen element would go beyond laptop screen because of it being stretched by it's content. Here is a version that deals with it http://codepen.io/anon/pen/qZxKRo
I have the following scenario:
I have a <div class="row"> and then I have another <div class="col-lg-3"> where I will be putting the picture of a profile of an user. The problem is that I would like to center that picture to be in the middle of the available space, so I would normally do this:
<div class="row">
<div class="col-lg-3 col-lg-offset-x">
<img src="..." class="..." alt="..." title="..." data-size="...">
</div>
</div>
What would be the x value on the class of the <div class="col-lg-3 col-lg-offset-x"> If I wanted to center that div? Anybody has any idea how to do that?
Duplicate of Center a column using Twitter Bootstrap 3
"You can center any column size by using the proven margin: 0 auto; technique, you just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
.col-centered{
float: none;
margin: 0 auto;
}
Now you can add it to any column size at any screen size and it will work seamlessly with Bootstrap's responsive layout :
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Note: With both techniques you could skip the .row element and have the column centered inside a .container but you would notice a minimal difference in the actual column size because of the padding in the container class."