working with a simple bootstrap Carousel for a class assignment. I've reduced the max-height of the images to 400px but as a result the top of the images are the only things being displayed. I've tried messing with the margins a bit on the image and was about to just crop the images so they fit but I figured I'd ask the community first.
How does one recalibrate where the images on a boostrap decide to center the image? I just want to shit the image up so the middle of the image is what is being displayed on the now resized carousel?
I think you maybe be looking for the object-fit: contain css property
When specified an image will be show at is maximum size that still mantains
aspect ratio.
https://www.w3schools.com/css/css3_object-fit.asp
.carousel-item {
max-height: 200px;
}
.carousel-item img {
height: 200px;
width: 100%;
object-fit: contain;
}
Related
I want to display a bunch of images stored on a server. The images are taken from a user's phone and the dimensions and aspect ratio are unknown.
I just want to have an image fully fill a DIV while maintaining its aspect ratio. If the image is wider than taller, I want the image scaled so the height is 100% the Div and the sides would be clipped off. Similarly for if the image is taller than wider, I want the image scaled up/down so the width is 100% of the Div
Hopefully this explains it
I thought this would be pretty trivial, but here i am. I can make an image fit tall or wide but not either depending on the aspect ratio. I've tried several different methods and I am at a loss.
I have a Stackblitz Example here.
I have a 2x2 grid, and I would like to get the images to fill those grids. Some images need to be rotated. I'm not sure why they need to be as the look normal on my computer. I have a hardcoded flag to force a rotation on some images, but the rotation appears to screw up the css further on.
CSS:
.img-container {
/* height: 150px; */
width: 100%;
}
.img-container img {
height: 100%;
/* height: -webkit-fill-available; */
width: 100%;
object-fit: cover;
}
HTML:
<div class="showBorder img-container">
<img #image class="container-img-objfit2"
[ngClass]="{rotateLeft: rotate}"
[src]="imageURL" />
</div>
How can I fill these DIVs regardless of the aspect ratio?
Can I do any of this inside angular? I tried to get the image size and see if I could set custom class that would handle the rotation, but that didn't seem to work either. The dimension for all my pictures was identical. So no way to distinguish which pictures need rotation.
Or am I going about this all wrong? Ultimately I think I will have a process to scale and crop the images on the server so they are prepared for the client app.
Update:
This sample is an attempt to set the image in the background and use a :before selector to rotate the image. It does not work fully as I cannot change the image dynamically to other images.
You can just set the images as background-image for the div and set its size to cover.
So just remove the img tag and keep your div tag only
<div class="showBorder img-container" [style.backgroundImage]="'url(' + imageURL + ' )'">
</div>
In CSS you will have to specify the height and the size
.img-container {
height: 150px;
width: 100%;
background-size:cover;
}
I know this is a easy question but i just can't seem to find the solution.
I am currently using a bootstrap carousel, with 1920x1080 res images.
I want the image to stay the same, but the height to be cropped down to 480px.
Note. NO SCALING.... the image should just be cut-off, no stretching or scaling.
lets say this is my css class:
.carousel-top-img{
height: 480px;// image scaled down to 853x480px
}
.carousel-top-img{
max-height: 480px;// image stretched but 1920x480px met
width: 100%
}
It doesn't use bootstrap, but here's a pure CSS solution:
#this_img{
width: 1920px;
height: 480px;
object-fit: cover;
}
A bit more on object-fit: LINK
I hope that helps
Change the dimensions of .carousel-top-img's container and apply overflow: hidden to it.
I have an image carousel with images in it, and I can't figure out why the images won't centre within it. Here's what I currently have for my CSS as it relates to the content of the carousel:
.blueimp-gallery { width: 90%; height: 90%; margin-left: auto; margin-right: auto; align: center;}
Normally when the height and width are set to 100% the images fill up the carousel all the way and are centred within it. However I don't want them to be 100%, and when I change them to a smaller amount they align to the top left of the carousel instead of the middle. How can I fix this?
To be certain I would need more code, but it seems you're applying your CSS to the gallery, not the images in it...
if you change .blueimp-gallery to .blueimp-gallery img it should center the images
I'm working on a responsive site (using Foundation 3) that uses brush strokes as button backgrounds. I'm having a hard time with 1) getting the images to scale with the rest of the responsive design 2) making the full size background image show no matter how big the container div is.
A couple screen shots:
When the browser is full width-
http://www.screencast.com/t/3Lu86fhnsZkk (I'm a new user can't post images)
When the browser scales in width-
http://www.screencast.com/t/3Lu86fhnsZkk
CSS:
h4.reserve{
background: url(../images/reserve_spot_bkg.png) no-repeat;
width: 290px;
height: 63px;
padding-top: 20px;
margin: 0 0 0 -10px;}
What's the better way to have background images that 1)show full size even though the content is small and 2) stay responsive?
For making the background fit to the container it belongs to, set the background-size to cover
h4.reserve {
background: url(../images/reserve_spot_bkg.png) no-repeat;
background-size: cover;
width: 60%;
min-width: 100px;
}
http://www.w3schools.com/cssref/css3_pr_background-size.asp
The Image will resize while you resize the container element, so make the container element responsive using percentage values for width/height or use media queries.
Use min-width and max-width to prevent the element from getting too small or wide.
I have an image in the header of my website. I'd like to use a CSS property to make it stretch across the width of the browser, so that it reacts to the user adjusting the browser window size, and so that the vertical axis of the image is scaled accordingly. Is this actually something that can be done?
Percentages will keep an image the whole width, and will update the image on browser resizing.
If you want the image to always be stretch, you can use:
img {
width:100%;
}
However, that can easily make the image look like total crap. A safer way might be:
img {
max-width:100%;
}
Either way will get the image changing sizes with browser resizing. However, the second won't stretch the image past it's natural size, so it doesn't look deformed.
You can set the width and height properties to percentages (for example, a width of 100% would cause the image to stretch across your page). This can be done using CSS.
CSS can certainly stretch an image (or, at least, I've used it to do so in Firefox at the folowing url: http://www.davidrhysthomas.co.uk/mindez/borked.html):
img {height: 100%;
width: 100%;
min-height: 600px;
min-width: 800px;
}
for example.
But...I think for it to react to the viewport resizing that JS would be probably your better-friend.
Here, give this a go, just apply this CSS style to the element that contains the image. In this example the image is on the background of the page body:
body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}
This will maximise your image across the element. Resizing the window will scale the image to fit the browsers new window size