Resizing <img> in Bootstrap carousel to parent element in CSS - html

I have a dynamic page that has a carousel. I have no control of the images, because they are uploaded by the user. There are some guidelines, but I can't be sure that they are gonna follow them.
So, in my development tests, I have three images: a 100x100, a 2800x1500 and a 600x400
I want the carousel be in the middle of the page, and be responsive. I have no problem with that if I have more or less consistent images.
...
<div class="carousel-item active">
<div class="carousel-img">
<img src="img1.png">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img">
<img src="img2.png">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img">
<img src="img3.png">
</div>
</div>
...
The CSS for "carousel-img" currently (I have tried lots of combinations, and nothing seems to work) is:
.carousel-img {
height: 400px;
width: 100%;
overflow: hidden;
}
.carousel-img img {
height: 100%;
width: 100%;
object-fit: cover;
}
Now, the very large image, works as intended. It resizes not using more than 400px vertically. The problem is with the other two images. The smallest one, resizes from 100px to 400px vertically and up to around 400px vertically, it doesn't fills up horizontally, despite the 100%.
So how can I tell CSS to resize the images (without changing aspect ratio) to use 100% of the parent container. Let me try to explain better: if the carousel is inside a <div class="col-md-6">, it should use all the width and up to 400px.
Edit
Please accept my apologies to make everyone waste their time. There's no error in my original code. But there was a previous DIV before the carousel that read:
<div class="row justify-content-center">
I thought this might be no problem since it is intended to center the following DIVs, I don't know why but this justify-content-center prevented the images to resize appropriately, when I removed it, the images inside the carousel started working as intended.
Thank you very much to all who offered to help, today I learned something different.

Find a working snippet in this jsfiddle – this is using the carousel with indicators provided in the documentation and the image sizes you are considering.
The only changes you have to make is to remove your carousel-img div from your HTML, and change the .carousel-img rulesets in CSS to be applied to carousel-item instead:
...
<div class="carousel-item active">
<img src="img1.png">
</div>
<div class="carousel-item">
<img src="img2.png">
</div>
<div class="carousel-item">
<div class="carousel-img">
<img src="img3.png">
</div>
</div>
...
And the CSS:
.carousel-item {
height: 400px;
width: 100%;
overflow: hidden;
}
.carousel-item img {
height: 100%;
width: 100%;
object-fit: cover;
}
Have also removed the active class from all your items except the first as that would cause problems for Bootstrap JS to iterate through the slides.
You would have already got a first from me for using object-fit: cover from the start!

Related

I want to stretch a logo's width and fix the size of logo so that it is clearly visible

The selected logo should be visible enough.I have added media queries but not able to work it properly.The logo can be stretched width wise,but I don't know how to do that.
As of now I have done
<div class="row">
<div class="col-6">
<h3 class="eta m-0">Estimated Delivery Date</h3><br>
<h1 class="textFontAndColor">Friday 29, September</h1>
</div>
<div class="col-6">
<img src="https://cdn.worldvectorlogo.com/logos/united-states-postal-service.svg" class="fill"><br>
<span class="textFontAndColor">EZ00093838993N</span>
</div>
</div>
The image file itself has quite a lot of whitespace around it so if possible maybe using a wrapper div to crop it would help the situation.
The styling here might not work right away, but just by eyeballing I was able to throw something together that at least for me locally worked well enough.
<div class="col-6">
<div class="imgWrapper">
<img class="logo" alt="" src="https://cdn.worldvectorlogo.com/logos/united-states-postal-service.svg" class="fill">
</div>
</div>
.imgWrapper {
width: 400px;
height: 150px;
overflow: hidden;
}
.logo {
width: 300px;
height: 300px;
margin: -75px 0 0 -300px;
}
So the imgWrappers width and height controls the overall viewpoint thats to be shown and with logos width and height you can fix the logo image to be proper size and playing with margins get the position right.
you're using an incorrect media query syntax; the syntax for media queries is:
#media (min-width: 768px) {
selector {
property: value;
}
}
You may also simply provide the image with a unique class name, to avoid unnecessary complicated css selectors as the one you're using.

Display image inside the box without stretching it

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.

Bootstrap responsive image will not stay in center

I'm trying to line up three pictures within a bootstrap grid. All of the images were centered, which is what I'm trying to, before I added a img-responsive class to one of the images. I do however want the images to be responsive while also making them a tiny bit larger than they are already. Tried numerous things such as "width: 200%;" however without success
How it looks
I created a "center-all" class within my css that should center all the three of them, and it did work, just until I added the img-responsive class to the red one. The class was not added to any of the other images.
.center-all {
text-align: center;
align-items: center;
align-content: center
vertical-align: center;
}
JSFiddle
https://jsfiddle.net/8a6ee7f5/
Images doesn't work in Fiddle ofc.
What I want to achieve:
I want the images to be 2 times larger than what they currently are and I want them to be responsive while still keeping them centered.
Thanks in advance!
I found the answer to my question(s).
When adding the img-responsive class to the image it moves to the left. By adding "center-block" to the class to the image it should stay in the center.
<img src="..." class="img-responsive center-block">
Now I just need to find the answer on how to upscale my pictures to 200%.
EDIT:
I found the following to upscale my images:
CSS
.wrapper {
width: 40%;
}
and added that to my image class.
HTML
<img src="..." class="img-responsive center-block wrapper">
And that fixed it.
So bootstrap already has an element centering class called .text-center you can just add this class to the row wrapping your items and everything in that row will be centered. Then instead of using .img-responsive you can add a width to the image instead or give the image a percentage width. It will maybe look something like the following hopefully this is what you are looking for:
Here is a fiddle Updated Fiddle
note: I have added a border-radius of 50% to your images because I assume you want them to be round. If you want to use 100px you can change it back.
Css:
#values img{
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
width: 80%;
}
#val1 {
background-color: #792c24;
}
#val2 {
background-color: #4f5e6d;
}
#val3 {
background-color: #665e25;
}
Html:
<div class="container" id="values">
<h3 class="fancy">Values</h3>
<div class="row text-center">
<div class="col-sm-4">
<h4>Independent</h4>
<img id="val1" src="http://placehold.it/300x300">
</div>
<div class="col-sm-4">
<h4>Team Player</h4>
<img id="val2" src="http://placehold.it/300x300">
</div>
<div class="col-sm-4">
<h4>Dedicate</h4>
<img id="val3" src="http://placehold.it/300x300">
</div>
</div>
</div>

Need to keep image (horizontal / vertical) in a fixed height div

I am following my previous question that has two boxes, that have two images (can be vertical or horizontal), the issue is the height of boxes are fixed and when I change the window screen in some screen sizes the images bypass the border of the boxes.
I checked answers of these questions 1 and 2 but did not help much.
DEMO
CSS
.items { */
position: relative;
margin-bottom: 7px;
margin-left: 7px;
margin-right: 0px;
text-align: left;
background-color: red;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
padding-left: 1%;
height:260px;
}
.col-md-12.col-xs-12.btn>a>img {
float: right;
width: 100px;
height: 50px;
}
.col-md-12.col-xs-12.my-col {
padding-left: 100%;
}
.my-row {
bottom: 0;
padding-right: 0;
position: absolute;
}
.my-row {
bottom: 0;
padding-right: 0;
position: absolute;
}
.btn {
float: right;
bottom:0;
margin-right:-12px;
margin-bottom:-6px;
position:absolute;
right:0;
}
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-3 items">
<div class="row">
<div class="col-md-12 text-center">
<h4>T1</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h5>T2</h5>
</div>
</div>
<div class="row">
<div class="col-md-12 row text-center">
<a
href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
title="T1" data-gallery rel="nofollow"> <img
id="imageresource"
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
class="img-thumbnail" width="30%" style="margin-left: 30px;" />
</a>
</div>
</div>
<div>
<img src="#" class="btn" />
</div>
</div>
<div class="col-md-3 items">
<div class="row">
<div class="col-md-12 text-center">
<h4>T1</h4>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h5>T2</h5>
</div>
</div>
<div class="row">
<div class="col-md-12 row text-center">
<a
href="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
title="T1" data-gallery rel="nofollow"> <img
id="imageresource"
src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong"
class="img-thumbnail" width="25%" style="margin-left: 30px;" />
</a>
</div>
</div>
<div>
<img src="#" class="btn" />
</div>
</div>
</div>
</div>
</div>
First off, the markup is over complicated for what you want and line 15 and 45 are applying bootstrap classes .col-md-12 and .row on the same element which is in incorrect. Bootstrap class .col-xx-nn must be assigned to a child element with a bootstrap class .row.
Getting back on track to what you want. I have simplified the HTML code to get your desired result, I think. Check it out and let me know what isn't right and I will change it and explain why.
https://jsfiddle.net/6y4uf16y/84/
What I did was create a container div around the sale image that uses the CSS flex box. This div will take up any remaining space. Therefore, if you change the height of your .items element. The flexbox container will adapt and the sale image will respond appropriately to the new size. There is no fixed heights here except for the one that was placed on the .items class of 260px which I believe is what you wanted.
The reason for this is that the bootstrap class .img-reponsive needs a height and/or width attribute to be responsive. Therefore, I have set the height and width equal to the flex box container around it. You can change the width value or .img-sale back to 30% if you wish.
Moreover, as a bonus, I have aligned the button to always be in the bottom right corner as I think you wanted it.
If this answer solves your problem, don't forget to mark it as the correct solution.
Cheers
Edit Sorry wrong JSFiddle link, correct link has been added. I also added proof that it is dynamic with multiple rows of text in the h4 and h5 elements.
You have to add class
.col-md-12 >a>img.btn {
float: right;
width: 100px;
height: 50px;
}
because .col-md-12.col-xs-12.btn>a>img is not applying to any of your given HTML div content
Is it a design requirement that the images get wider as the boxes get wider? If so, the only way to keep the images within the boxes is to increase the height of the boxes as you increase the height of the images.
If it's not a requirement that the images scale up, then you can see my solution here: http://jsfiddle.net/6y4uf16y/75/
All I did was remove the explicit widths from your images (the first was width="25%" and the second was width="30%") and instead used CSS to control the scale by limiting the max-height of the images. .items img {max-height:100px;}.
Since you have a fixed height and need to keep the images inside the boxes, you know for a fact that also have a fixed maximum height on the images
I am not sure if you can have line break on T1 & T2, otherwise you can do this
img{
max-height:170px;
width:auto
}
DEMO
i agree with #Bhavin Solanki and may be the one thing i will suggest that try to give the
width: 100px;
height: 50px;
in to percentages Or else you can go with Media queries for the particular image selectors that will help you to manage a lot
Your HTML Bootstrap code isn't totally correct:
You can't nest a .col-md-12 class inside a .col-md-3 class not
in my knowledge at least.
Your .rows classes are not always well positioned within the code
see the fiddle link that i prepared below.
I tried to do my best to understand what you want to achieve with your code i also ordered tags within your code so that your divs fit the window size regardless of its width.
EDIT
Try to define the width of your image with vw unit (width:15vw;) That will keep the image from crossing the containing item.
I illustrated an example for you here :
http://jsfiddle.net/merhzqwg/65/
Hope it helps.
OK this is the thing, your code is not very clean. there are some errors as well
for eg: you have used the id="imageresource" twice. An id can ONLY be used once on a single page. Very Important.
but i will provide a quick fix for this.
by default bootstrap adds max-width: 100%; height: auto; to the class img-thumbnail to override that what i have done is i have added a class to both of the images img-sale.
<img class="img-thumbnail img-sale" id="imageresource" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQKWYNnGt8d9G1sf8PE0TpOglpZ2dKnHWAP5FB_spYgelcToong" width="30%" style="margin-left: 30px;" />
and added the following css:
.img-sale {
max-height: 170px;
width: auto;
}
http://codepen.io/anon/pen/OVwrpJ?editors=110
http://jsfiddle.net/6y4uf16y/82/
but the rest of the code is not recommended to proceed with.

Image resize in mobile view

I've the following markup for a page which is mobile ready:
<section>
<div class="cover-section">
<img src="img/central-park.jpg" alt="" style="width:100%" class="hoverZoomLink">
</div>
<div class="logo-section">
<div class="container postLeft hiddenClass visibleClass animated fadeInLeft">
<img src="img/logos/instagram.png" alt="">
</div>
</div>
</section>
The problem is, since I provided width:100% for the imgin the mobile view, the whole image is appeared to be proportionate and as a result, very small. (Since this image is very wide).
Is there any way that I can display the image with a min-height:300px without adding the image as a background and make it as cover ? Because the image is being generated dynamically in which case allocating it to a particular css class wouldn't be easy.
There's no other better way around this:
img{/*but target to specific selector that you need*/
min-height: 300px;
max-width: 100%;
}
This produce the responsive result but when minimum height fits the requirement then this starts stretching.
One better solution is to use image as background and using css like this produce better experience with responsive image:
.cover-section{/*remove img inside this selector to use it as background*/
background: url(image-path.jpg) no-repeat center;
background-size: cover;/*don't forget to use vendor prefixes*/
min-height: 300px;
max-width: 100%;
}
You could always use media queries to handle CSS for mobile devices. Something like follows : (I've moved your img styling to a class 'cover')
.cover {
width:100%;
}
#media screen and (max-width: 500px) {
.cover {
min-height: 300px;
}
}
</style>
<section>
<div class="cover-section">
<img src="img/central-park.jpg" alt="" class="cover hoverZoomLink">
</div>
<div class="logo-section">
<div class="container postLeft hiddenClass visibleClass animated fadeInLeft">
<img src="img/logos/instagram.png" alt="">
</div>
</div>
</section>
Not sure if this is what you want.