How to prevent scaling of background image using CSS? - javascript

I have a high-resolution image that is the background image of a div. The div keeps rendering it at a smaller size but I would like to leave it unscaled. I don't mind that the background image is cropped to show only a portion of the image as long as that portion has the original size.
Javascript:
console.log(img.width) // this comes out 3840px
resultDiv.style.backgroundImage = "url('" + img.src + "')";
resultDiv.style.backgroundRepeat = "no-repeat";
CSS:
.img-full {//this is the class of the img
max-width: none;
max-height: none;
}
#bottomPanel {//this is the resultDiv that is scaling the background image
height: 30vh;
background: black;
margin-left: 10px;
margin-right: 10px;
overflow-x: auto;
overflow-y: auto;
}

you can specify the following CSS Property
background-size: cover;
this will make sure the background covers the whole element regardless if it was cropped or not, different that
background-size: contain;
that will scale the image to be fit within the element and to be fully visible

If you would like to prevent scaling by using background-size: cover.
This crops the background, and it never stretches for me.
More info about background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Related

html constrain box-model of image to the area it covers

I have a square image inside a rectangular div of variable aspect ratio. I set its property object-fit: contain; with the idea that it would dynamically resize to fill the div but not exceed it. This works as intended. However, I have an imagemap to go along with it, and here is where the problem is: The boxmodel for the image extends out to fill the rectangular div, despite the actual image only taking up a portion of it. Is there any way I can either constrain the boxmodel to only take up the space the image uses, or to somehow get information about that space in javascript?
Thanks!
You can either use width: 100%, height: 100% and object-fit: cover or, the better option, background-image, background-size: cover and background-repeat: no-repeat.
.img-container {
width: 400px;
height: 400px;
background: gray;
}
#img1 {
background-image: url(https://picsum.photos/600/200);
background-size: cover;
background-repeat: no-repeat;
}
#img2 {
width: 100%;
height: 100%;
object-fit: cover;
}
<p>Use background (the better option)</p>
<div class="img-container" id="img1"></div>
<br>
<p>Use full width/height and object-fit</p>
<div class="img-container">
<img src="https://picsum.photos/600/200" id="img2">
</div>
Learn about these here:
First solution:
background image
background size
background repeat
Second solution:
width & height (sizing)
object fit

Background size cover not working on longer pages on mobile

This is a Next.js project and the mobile being used here is google pixel 3a. I'm having a problem where on longer pages my background image will not display at all. Here is how it looks on pages where the height is not exceeding the viewport height
But on some longer pages where you need to scroll to reach the bottom, it doesn't display at all
body {
background-image: url("https://via.placeholder.com/500");
background-size: cover;
margin: 0;
padding-left: 5vw;
padding-right: 5vw;
height: 100vh;
min-height: 100%;
width: 90vw;
font-family: system-ui;
overflow-x: hidden;
font-size: 1.3rem;
}
If I change background-size to auto then it will work on every page, but I would like cover. Maybe I don't understand how cover works for pages where scrolling is required, but I would like the background image displayed as it is in the first image, and if the content is longer than the view port, the content should just scroll across the image without the image moving. Any help is appreciated. Thanks.
If I've understood correctly, you want the background image to at least fill the viewport but if the body is higher than that you want it to fill the whole body.
Therefore, tell it that the min-height of the body must be 100vh and don't set an actual height, let it work it out from the content.
I'm assuming in this snippet that you want just one copy of the background, centered and using size cover (so it may get cropped top/bottom or at the sides depending on relative aspect ratios).
A dummy div is put in the snippet to ensure we get scrolling.
body {
background-image: url("https://via.placeholder.com/500");
background-size: cover;
background-repeat: no-repeat no-repeat;
background-position: center center;
margin: 0;
padding-left: 5vw;
padding-right: 5vw;
min-height: 100vh;
width: 90vw;
font-family: system-ui;
overflow-x: hidden;
font-size: 1.3rem;
}
div {
height: 350vh;
}
<div></div>

CSS - Show Entire Image as Background Without Cropping

I'm trying to setup a div with a background image with some text on top of it. The background image needs to stretch the entire width of the viewport, which I've been able to do successfully. This is my CSS:
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problem I'm having is that it isn't showing the full height of the image. The image is being cropped at the top and bottom. I want the image to show it's full height and the user needs to be able to scroll down to see more content below the image.
Is there a way I can show the full image without cutting the top and bottom off?
Thanks!
Remove the fixed and instead of cover use contain. If you want a specific size though I would define a height in my css.
You can use background-size: auto 100%;
I updated an example in fiddle to see how its looks.
http://jsfiddle.net/4ozmn00t/2/
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background: url(http://);
background-size: 100% 100%;
}
setting the width and height of background-size to 100% will fill the div
Remove the fixed from the background.
url() no-repeat center center

responsive images and different pic resolutions

i have this website, and as you can see on the index page that we have a 80% width and 100% container and in it a picture. Now there is a problem with different images and their resolutions, some are stretched some are narrow.
I want the pic to be full screen size and 80% width and to have proper aspect ratio. I would probably need some javascript to crop the images? please i need some insights on how to do that. Also a slider can do the trick if it has cropping feature and the possibility of 80% width and 100% height
here is the url
http://tinyurl.com/otwocvz
try removing the image and add the image as header2 background.
.header2 {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-color: #CCC;
display: block;
background: url(http://leowd.com/wp-content/uploads/2014/08/leowd-umbrella-red2.jpg) no-repeat center center fixed;
background-size: cover; }

Responsive Image Cropped Right

How can the following behavior be achieved?
Start with wide image e.g. 1440px x 378px.
Screen width = 1440px+ image displays normally.
As screen width is reduced the right side (or both left/right) of the image is cropped.
Screen width = 1024px image is fully cropped i.e no additional cropping occurs now.
As screen width is reduced the cropped image reduces in width/height like a standard responsive image i.e. img { max-width: 100%; }
Does using background image solve your problem?
.image {
height: 300px;
width: 40%;
max-width: 1440px;
background-image: url('http://kaboomshark.com/wp-content/uploads/2012/03/xbox-logo-600x300.jpg');
background-repeat: no-repeat;
background-position: center center;
}
Then set your media queries to resize or set the new background image url, size and positioning the image as needed something like so: http://codepen.io/anon/pen/DIAic/
Using a div wrapper:
<div class="wrapper">
<img>
</div>
.wrapper {
max-width: 100%;
width: 1440px;
overflow-x: hidden;
}
.wrapper img {
width: 1440px;
max-width: 140.625%; /* 1440px/1024px = 140.625% */
}
Above 1440px the image will display in full.
Between 1024px and 1440px it will be cropped, but display at 100% scale.
Below 1024px, it will scale down, keeping the same region cropped.
Fiddle: http://jsfiddle.net/MizardX/PB7D5/
If the exact widths are not important, you could leave them off and let everything auto-size. The max-width on the image will control the maximum amount that will be cropped.

Categories

Resources