I want to take a large source image of any dimensions, scale the height down to 400px, crop it to the middle now-scaled-down 300px of width, and display it on a webpage.
For this landscape source image:
https://www.sitebuilderreport.com/assets/facebook-stock-up-446fff24fb11820517c520c4a5a4c032.jpg
This code works perfectly:
HTML
<div class="myscaled" style="background-image: url('https://www.sitebuilderreport.com/assets/facebook-stock-up-446fff24fb11820517c520c4a5a4c032.jpg');</div>
CSS
.myscaled {
display: inline-block;
width: 300px;
height: 400px;
background-position: center center;
background-size: cover;
border-radius: 10px;
}
However for this portrait source image:
https://media.licdn.com/mpr/mpr/shrinknp_800_800/AAEAAQAAAAAAAAFrAAAAJGE4YTQ0ZThjLWRkM2MtNGM1OS1iNGMwLTZiZjliYmRkZTY2Nw.jpg
The same jsfiddle crops the top and bottom:
I guess it's because the height to width ratio is more than 4:3, so it's cropping the height to give a width of 300. What I want in that case is preserve all the height and just display whatever width there is. So basically I want the height to be 400 and the max-width to be 300.
Any ideas how I can do this? Maybe trap the image inside a fixed size div and let the extra image spill out?
EDIT
I've also tried this solution, which works fine for the portait, but I can't get the oversized width of the landscape to center in the container div.
HTML
<div class="mydiv">
<img class="myimg" src="https://www.sitebuilderreport.com/assets/facebook-stock-up-446fff24fb11820517c520c4a5a4c032.jpg"></div>
CSS
.myimg {
height:400px;
}
.mydiv {
overflow:hidden;
text-align:center;
margin: auto;
width: 300px;
height: 400px;
border: 3px solid #73AD21;
}
You can use background-size: contain; , maybe it should help.
Related
I can't show an image well with fixed height because shows stretched, i want to position image.
I want to can use large images with 300px of fixed height but the image can't show stretched.
The image link have to come in img tag because it come from database.
I put here a example code:
.image
{
position:relative;
width: 100%;
height: 300px;
}
.image img
{
width: 100%;
height: 300px;
}
<div class="image">
<img src="http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg"/>
</div>
Thank you
Use background-image inline and just cover it using background-size: cover;
.image
{
position:relative;
width: 100%;
height: 300px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div class="image" style="background-image: url('http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg'); "></div>
You can use object-fit to get the same
The object-fit property defines how an element responds to the height
and width of its content box. It's intended for images, videos and
other embeddable media formats in conjunction with the object-position
property. Used by itself, object-fit lets us crop an inline image by
giving us fine-grained control over how it squishes and stretches
inside its box.
object-fit can be set with one of these five values:
fill: this is the default value which stretches the image to fit the
content box, regardless of its aspect-ratio.
contain: increases or decreases the size of the image to fill the
box whilst preserving its aspect-ratio.
cover: the image will fill the height and width of its box, once
again maintaining its aspect ratio but often cropping the image in
the process. none: image will ignore the height and width of the
parent and retain its original size.
scale-down: the image will compare the difference between none and
contain in order to find the smallest concrete object size.
Object-fit
.image
{
position:relative;
width: 100%;
height: 300px;
}
.image img
{
width: 100%;
object-fit:cover;
height: 300px;
}
<div class="image">
<img src="http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg"/>
</div>
you can use this
.image
{
position:relative;
width: 100%;
height: 300px;
background-image:url('http://2.bp.blogspot.com/-isrPay4twtQ/UWudn23k1sI/AAAAAAAAAZQ/vDeXHzTJxeU/s1600/imagens-lindas+(1).jpeg');
background-size: cover;
}
<div class="image">
</div>
You cannot use width and height for an image tag it will stretch the image. So use either width or height.
.image
{
position:relative;
width: 100%;
height: 300px;
}
.image img
{
max-height: 300px;
}
Or Use
object-fit:cover;
But image will crop.
I have a site here: http://ideedev.co.uk/newseed/design/ and the banner at the top works great and just how I want it to - the banner image it 100% width of the site and the text floats in the middle and centre at all sizes.
However, for smaller mobile devices, I want to adjust the height of the image, so it scales down and keeps the ratio of the image in tact with the text still sticking in the middle. Can anyone help?
My HTML is here:
<div id="absolute1111" style=" background: url(<?php echo $feat_image; ?>);">
<div class="centerd1111">
<h1><?php the_title(); ?></h1>
</div>
</div>
My CSS is here:
#absolute1111 {
position:relative;
width:100%;
height:50%;
display:table;
color: #fff;
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: 50% !important;
}
.centerd1111 {
display:table-cell;
vertical-align:middle;
text-align:center;
height:500px;
padding: 0 50px 0 50px;
}
Many thanks :)
Using image as a background image won't allow you to scale down image with screen size as you have to adjust the height manually to scale down the image which is not a good practice.
Using the image in HTML browser will be able to scale down the image, keeping the aspect ratio intact.
In your case, you can use media query for mobile to adjust the image height so the whole image scales down and the full image is shown.
Here is the code for the same:
#media only screen and (max-width: 500px){
.centerd1111 { height: 180px; }
}
Let me know if this works for you.
Thanks.
instead of background css attribute, you can put the image as element, in this way, you can manipulate it more easier. this if my fiddle. but for this fiddle, I only make it for mobile, so you need to apply this to #media query for mobile display.
https://jsfiddle.net/bdv2L0a0/
this fiddle, I made it that, the image's height will follow its proportion when the display becoming smaller
.background img {
width: 100%;
height: auto; //default value, no need to declare this
}
If you know the ratio of the image (proportion between height and width), you can do this:
.your-container {
overflow: hidden;
height: 0;
padding-bottom: 46.406570842%; /* image height / image width */
}
This is the trick used to embed iframes that maintain ratio in different viewport sizes. It's based on the fact that when you give a percentage value to padding property, it applies this percentage to the element width.
Also, you don't need to give display: table to center the text. You can just do this:
.your-container {
text-align: center;
position: relative;
}
.your-centered-text {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
See this jsfiddle.
I am using the same image as a background image for a div on one page and as an image element on another page. They take up the same space on both pages, same width and height, but the image is not positioned the same. This is the background image html:
<div class="frontpage-bg-image-wrapper">
<div class="header-bg-image frontpage-header-hero"></div>
<div class="bg-overlay overlay"></div>
</div>
And this is its css:
.frontpage-header-image-div {
height: 100%;
.frontpage-bg-image-wrapper {
position: relative;
width: 100%;
min-height: 635px;
background-size: cover;
background: url('/wp-content/themes/sfk/assets/images/sfk-bg.png') no-repeat;
}
}
And on the other page I have a an image element:
<div class="hero-image-wrapper">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/sfk-bg.png">
<div class="overlay"></div>
</div>
And its css:
.hero-image-wrapper img{
width: auto;
height: 100%;
}
But there is the difference in the positioning of the image, I have tried with object-fit: cover, but it didn't help. This is the background:
And this is the image element:
How can I fix that?
I think your picture is smaller than container (specially in 'height');
background-size:cover will cut external picture to fit the container, however the 'img' tag will not.
First way: set the container size as same ratio as the picture ([container width] : [container height] = [image width] : [image height])
Second way : try the img tag's css with: 100% , height:auto
From what I can tell cover plus min-height is cropping your image a little bit, probably when it's stretched beyond the native resolution of the image.
I would do what they do to create responsive video, add padding-bottom as a percentage that is equal to the video's aspect ratio. If your image is 400x300 then you'd add 75% padding,
300 / 400 = 0.75 * 100 = 75%
Doing this allows the element to fill the width of it's container with the same proportions as your image.
img {
display: block;
max-width: 100%;
height: auto;
}
.container {
margin: 3rem auto;
width: 70%;
}
.bg {
position: relative;
background-image: url( 'http://lorempixel.com/800/400/city/4/' );
background-size: cover;
padding-bottom: 50%;
}
#media ( min-width: 1120px ) {
.bg {
max-width: 800px;
padding-bottom: 400px;
}
}
<div class="container">
<img src="http://lorempixel.com/800/400/city/4/">
<div class="bg"></div>
</div>
For the img element we've made it responsive. Most CSS frameworks use the three properties used on img for their responsive image class. Note that the image will not resize beyond it's native resolution.
For the div to replicate the responsive styles of the img we needed to use a media query to prevent the image from expanding beyond it's native resolution along with updating the bottom padding. If we don't change the padding bottom when we limit the images width then you end up with a div that takes up a lot more space than the background image does (creating a lot of white space below it).
Yo could try setting background-size to 'contain'
I have image of size 1400x560 and I want the my jumbotron div to scale to fit the size of the image. It works fine when i set the width of the jumbotron to that of the image but when I shrink the website to mobile view, I have issues. So how can I fix this?
I forgot to mention i have issue with the height and not the width, The jumbotron scales div to the width of 1400 but not to the height 560px
Here is a preview of the html page http://threeguys.us/rts/testing.html.
When i shrink the page , i want the image to resize according to the width of the browser
index.html
<div class="jumbotron">
</div>
css
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
height:560px;
}
What you're looking for is background: contain;. Simply add this to your class as follows:
.jumbotron
{
padding-top: 0px;
padding-bottom:0px;
background-image:url('images/car/car.jpg');
background-size: cover;
background: contain;
width: 100%; /* make sure to define width to fill container */
height: 100px; /* define the height in pixels or make sure */
/* you have something in your div with height */
/* so you can see your image */
max-width:1400px; /* define the max width */
}
The background image will now scale with the size of the div (assuming the div is scalable). If you want to constrain your div so it does not get bigger than a certain size (in your case, the size of the background image), use max-width: 1400px;
See my JSFiddle example.
There isn't a way to get the div to fit the size of its background image, so I suggest you use an img tag instead.
To get your div to fit the size of the image, use display: inline-block on the div:
.jumbotron
{
display: inline-block;
border: solid red 1px;
}
<div class="jumbotron">
<img src="http://i.imgur.com/5LGqY2p.jpg?1" />
</div>
Try:
background-size: 100%;
width:100%
position:relative;
Hope it helps you
Wrap your jumbotron with:
<div class="container"></div>
It should make it fit width-wise to the rest of your page.
Make it simple. Thanks
.jumbotron {
background-image: url('https://stmed.net/sites/default/files/sky-wallpapers-28043-8362242.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}
<div class="jumbotron"></div>
I have a div in my webpage with an image as its background.
When I make the browser window smaller, the right-hand part of the image gets cut off.
The code below is in my .css file:
.captions {
max-width: 870px;
margin-top: 20px;
margin-bottom: 25px;
background-image: url('../images/0.png');
height:20px;
background-repeat:no-repeat;
}
and this code is in my HTML page:
<div class="captions"></div>
Could someone please advise me how I get the width of the background image to shrink when the page is resized, so that the entire length of the image is always shown?
I am reasonable new to css and would really appreciate help regarding the code.
Thank you all in advance.
Use the background-size CSS3 property. It lets you specify what size you want for that background image. In this case we set it to 100% on both width and height (though you might want to change that to width only). And also set the .captions container to 100% width so it adjusts accordingly.
Working example:
.captions {
max-width: 870px;
margin-top: 20px;
margin-bottom: 25px;
background-image: url('../images/0.png');
height:20px;
background-repeat:no-repeat;
background-size:100% auto;
width:100%;
}
Using padding percentage to set the height, because padding-top and padding-bottom percentage is linked to container width. And padding-top is calculated by dividing the image height by width.
.captions {
background-image: url('http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png');
background-size: 100%;
width: 100%;
padding-top: 29.8%;
height: 0;
text-indent: -9999px;
}
See demo