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.
Related
I would like to have a responsive image with 80vw width for example. I want it to fit entirely on the screen and keep the proportions (if the height is too large, the width should decrease)
img {
width: 80vw;
max-height: 80vh;}
Use object-fit: cover;
and look at the same question please which is below, (btw of course you can do the same thing with background-image; and background-size: cover; if you want to use a bc-image instead of <img> tag)
heres the link:
responsive image with object-fit:cover
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;
}
I have a 64px that I would want to scale with browser window I have added max-width 100% but the image stays the same.
Html
<img src="../images/GitHub-Mark-64px.png">
CSS
img{
max-width: 100%;
height: auto;
}
If your image is smaller than the containing DIV, your CSS rule won't make it any bigger. Try to use width instead of max-width:
img{
width: 100%;
height: auto;
}
Addition/Edit after Comments of OP:
You can use any percentage value in this rule, like 60% (or whatever you like), but using width, not max-width (which is only a maximum limit, but not an actual size definition).
But note: It won't really look good if the original image is smaller than displayed and is "blown up".
Try using width instead of max-width in your CSS, width attribute actually sets the width of the img. However, setting it to 100% would actually cover the entire space, so perhaps you should use a lesser percentage accordingly.
Read: CSS Image size, how to fill, not stretch?
If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.
width: 100%;
height: 100%
background-size: cover;
I cannot use JS, this should be archived by CSS only. Container (DIV) is auto width (flexible) "table-cell" element.
I'd want to scale image down only when it width is larger than container (user can resize window - that's the reason).
I've used code shown below but it work only on IE7.
max-width: 100%;
height: auto;
width: auto\9;
I've tried to find any working fix for IE9, but without success.
Your max-width needs to be set to the image size and then width to 100% like so:
img {
width: 100%;
max-width: 500px;
height: auto;
}
Of course, this means that your max-width must be dynamically set based off the image being loaded, which may not be practical.
I stumbled upon this old question while trying to do the exact same thing the OP was trying. I am answering for anyone who may land here. Upon examining http://jsfiddle.net/SAada/2/ mentioned by the OP, I found an interesting solution:
setting
height: auto;
will ensure that the image will not be stretched / scaled up. At the same time, setting
max-width: 100%
will ensure that if the parent element width is less than the image width, the image is scaled down.
Thus, the combination that works for me is:
img {
max-width: 100%;
height: auto;
}
Oh, and after some more search, I discovered that this technique is also used by Bootstrap for responsive images!
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