Scale down image to fit into div, but never scale up - javascript

I have several images with very varying dimensions.
Some images may be as small as 50x100 and others as big as 4000x4000.
I want to show these images in their original size (never bigger), or scaled down to just fit inside the browser window.
Using the background image property I have gotten the images to always fit inside the browser, but I can't stop them from up-scaling if the browser is bigger than the image:
<div class="slide-pane" style="background-image: url(<insert url to image here>);"></div>
.slide-pane {
background-repeat: no-repeat;
background-size:auto;
position: absolute;
background-position: center;
background-repeat: no-repeat;
height: 80%;
width: 80%;
}
I have found these Javascript/Jquery solutions:
https://github.com/gutierrezalex/photo-resize
How to resize an image to fit in the browser window?
But I'm hoping there are some CSS only solutions.

max-height:100%;
max-width:100%;
height:auto;
Apply that to an img not an elements background image. Background images don't have full browser support for max width height. You could use background-size set to 100% 100% but I'd recommend using an img for better css control and accessibility.

If they’re content images (and not there for style) then you’re better off using an <img> element in the page. If you do that then you can give it img { max-width: 100%; } in your CSS. This has the added benefit of working in IE8 (unlike background-size).

Related

How do I mitigate the 'zoomed in effect' of a hero image that covers 100%width of the webpage?

When I'm creating a hero image section on my hobby site, which stretches 100%width of the viewport. Every image I upload has this zoomed in effect.Like you dont'see the whole picture just a portion of it.
I know I can use background-repeat, size and cover to play around with how I want the image to be presented. But is there a way for me to display the image without the browser cropping off a good portion of the image?
It seems like even when I resize the images it doesn't work either because the width is always 100% of the viewport.
Just curious if anyone has found a solution to countering the 'zoomed in' effect of an image taking 100% width of the viewport.
If you don't use the cover background property, at least try and set the height to 100%, as in here, and its fiddle.
body {
background-image:url("http://i.imgur.com/aZO5Kolb.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
That should stretch the all image within your viewport.
You can't control the height or aspect ratio of a user's viewport compared to the image size/ratio, so there will always be a possibility of cropping off from the width or the height when using background-size: cover.
In order to keep your aspect ratio for the image and cover the element with it, you can use background-position to the "focal point" of the image. For instance if the main part of the picture is at near the bottom right of the image, then you can set the background-position: 90% 90%. That way it the covering has to crop, it'll at least try to move the image so that the main subject is centered always in frame.
Here's an example:
body {
margin: 0;
height: 100vh;
width: 100vw;
background: url(http://placekitten.com/1000/700) no-repeat;
background-size: cover;
background-position: 50% 0;
}

How to maintain relative positions/sizes of dynamically sized, stacked div's

This page centers and shrinks my logo to fit in the browser window. It uses a single PNG file and CSS flexbox with max-width/max-height. (View code)
This page animates the same logo. However, in order to limit the ripple effect to just the blue portion, some changes were needed (view code):
Logo split into two parts and stacked on top of each other (position:absolute).
Hard-coded the size of the logo. (No longer sized based on size of browser window)
I can't figure out two things:
How do I change the hard-coded sizes back to dynamic sizes based on the browser size? I also hard-coded the top and left, but if the two images are centered and scaled by the same ratio, they should line up properly without offsets.
How do I vertically/horizontally center the logo, again? I think my previous flexbox CSS doesn't work because the elements have position:absolute. Update: I was able to get centering to work again, but this involved more hard-coded width/heights.
I think I can do this via JavaScript, but is a pure CSS/HTML solution possible? (I have a feeling centering and dynamically sizing elements with position:absolute might not be possible). If JavaScript is disabled, the solution should gracefully degrade (the two parts of the logo are correctly aligned; the logo fits inside browser window).
Example: https://jsfiddle.net/2rdjfwhb/1/
It is possible to do both with CSS, you just need another wrapper element around the "logo" class. This wrapper element can be positioned naturally inside of a flexbox. After that it's just about calculating the ratio you need for your logo image and the ripple canvas.
.parent {
max-height: 100%;
max-width: 100%;
}
.logo {
width: 100%;
height: 100%;
position: relative; /* Parent handles centering this guy now */
}
.logo-ligature {
width: 100%;
height: 100%;
position: relative; /* Positioned for z-index */
pointer-events: none;
}
.logo-background {
background-image: url(https://cdn.glitch.com/b2cea96d-c2a3-486e-90d5-f60a651a36e3%2Fle_square_light_noborder.png?1553791477453);
background-size: contain;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
width: 75%;
height: 75%;
position: absolute;
top: 12.5%;
left: 12.5%;
}

How do i make part of a CSS background fit perfectly to a browser

I am new to CSS and so i dont really know how to describe it but here is an example:website
As you can see the background image at the top of the website fits perfect in height and width to the space of any browser regardless of the resolution. As you scroll down the page it keeps the same style where a specific background color fits closely to the space of the browser. I have tested this on a laptop as well as mobile and it fits closely each time. How do i achieve this? Is it doable purely from CSS or do i have to involve JavaScript/Jquery, etc? I have seen many websites use this specific style and i would like to understand hoe it is done.
I am not asking specifically for code, just an answer that states what it is i should be searching for. Code is appreciated however.
You can use your browser's developer tools to see exactly how that site creates the effect. It's a combination of CSS and JavaScript.
The CSS:
.homepage-intro.homepage {
background: url("//d1sva73gxwx496.cloudfront.net/images/homepage/bg-intro-2039a477.jpg") no-repeat;
background-size: cover;
}
The JavaScript then explicitly sets the height of the <div> to match the browser window.
There are different approaches. If you inspect the site you linked, they are using background cover to accomplish this. background-size: cover; It will fill up the width and height of the current div.
See this article for more info: https://css-tricks.com/perfect-full-page-background-image/
That site is using JavaScript to set the height of the <div> that has that background image. Combined with background-size: cover;, that should do it.
If you want to make sure the bottom of your div hits the bottom of the browser window, you can do this via CSS.
CSS
div {
height:100vh;
}
or
body, html {
height: 100%;
}
div {
height: 100%;
}
You will require CSS and jQuery to do this effectively (and also to allow for cross-browser support).
CSS
//Add this to your background image's CSS.
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-position: center;
height: 100%;
jQuery
var viewportHeight = jQuery(window).height();
//wrote an if statement to allow for a minimum height. You can remove this if statement if you don't need it.
if(viewportHeight>500){
jQuery('page-wrapper').height(viewportHeight);
}else{
jQuery('page-wrapper').height(500);
}
To solve this issue, you need to accomplish two tasks:
Make the background-image always adjust to the size of the container. This is done, as others have already stated, by assigning background-size: cover; to the container element on which you placed the image as a background-image. Add background-position: center; for better results on low resolution devices as well as portrait orientation.
Make sure the container element stretches 100% of the viewport's width in both directions. Block level elements per default grab 100% of the available width, but you need to set an explicit height to match the desired layout. This can be achieved by applying height: 100vh; (100% viewport height) to the container element. Check if the unit vh is usable on the devices you plan the layout for: http://caniuse.com/#search=vh
If you need to support browsers that do not recognize vh it's probably the easiest solution to use javascript (or jQuery) to dynamically assign a height to your container element.
This is how it's done in jQuery for a <div id="my-container-element"></div>
$("#my-container-element").height($(window).css("height");
Same in pure Javascript:
document.getElementById("my-container-element").style.height(window.innerHeight+"px");
Try the following in your CSS sheet:
html { background: url(myImage.jpg) no-repeat center center fixed; background-size: cover;}
It will fill the whole page with your background Image.

How to crop an image to fit the required height in the screen?

I have a large image whose height is bigger than the screen height. I have no problem with the width. I need to crop it so that the top 65% of the screen contains this image.
<body>
<img class="img" src="image.jpg" alt="img">
<p>Description</p>
</body>
If I write a CSS as below, the whole image gets compressed to fit in 65% screen. Moreover, if I resize the screen, the image automatically starts attempting to fit in the top 65%, making the whole screen look disturbed.
body, html { height:100% }
img.img { height:65% }
I want instead, the image to be cropped so that the leftover fits in the 65%, and then it stays that way. That is, if I now resize the window, let the vertical scrollbar appear. How can I achieve this?
(PS: I didn't want to give a fixed height because I want the webpage to be viewed in different devices like mobile phone and iPads too.
I think this is what I need:
Get the maximum height of the device (not the current height of the browser screen as the user might have minimized it for some reason)
Crop the image in such a way that it fits the top 65%, and display it
Keep the image size that way irrespective of the user changing the screen size
But I am not sure how to achieve it.)
Is this what you are seeking: http://jsfiddle.net/JjwMw/1/
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 65%;
width: 100%;
position: relative;
top: -22.75%; /* 65*35/100 */
background-image: url(http://placehold.it/1024x768);
background-size: cover;
background-position: center bottom;
}
Note that the image is now a background-image and is leveraging the background-size property which is not supported in IE8 (...who cares?). If the image cannot be a background image, you scale a div proportionally to fill the width using a padding hack (Proportionally scale a div with CSS based on max-width (similar to img scaling)) and have the inside image set to 100% width and height.
Maybe this can be useful to you:
http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/
Also a search for css cliping property here or in google should bring enough info

CSS to display image preview better

I was trying to figure out what is the best, if it can be done, and desired method to take an image that is uploaded and trim the image for a thumb in CSS. If it cannot be done in pure CSS what is the method to do it in JavaScript/jQuery? The images may be different sizes but I am looking for a way that an image will square on center, and then reduce to fit. Example below:
This image is 413 x 300.
If this image was trimmed from the left and right for the portfolio thumb it would be 300 X 300:
Then the image needs to be reduced for the thumb 200 x 200 or what ever value the thumb is set to display:
EDIT
my understanding if #img_preview{width:200px;} is applied it would result in this:
example here:
http://jsfiddle.net/cnWqQ/5/
css like this:
#img-wrap{
height:200px;
width: 200px;
background-image: url('http://i.stack.imgur.com/yQ1j8.jpg');
background-size: cover;
background-position:center;
}
html like so:
<div id="img-wrap"></div>
Works by putting the images as the background in a div, works for all image shapes and sizes consistently.
it involves some css3.
You can do it in CSS, but it will only work with modern browsers :
You'll use background-image property :
<div id="myImageTrimed">
</div>
and the css :
#myImageTrimed {
background-image: url('img/youImage.jpg');
background-position: center; /* to make sure it trims the borders */
background-size: cover; /* As large as possible */
height: 200px; /* But only 200x200px are shown */
width: 200px;
}
Please comment if you have more browser constraints.
Just set the CSS width to the value you need, the height will be automatically adjusted to maintain the aspect ratio.
#img_preview{
width:200px;
}
You can mask the image with a div:
Your div:
height:200px;
width:200px;
overflow: hidden;
Your image:
position:absolute;
height:inherit;
margin-left:-15%;
see this demo below: http://jsfiddle.net/jRCgP/

Categories

Resources