Having the source of an image as a dataurl, is there a way to get the image height and width either in javascript or PHP so that I can set these as properties of a div?
or is there a better way to make the div scale to the image size. Consider that the image is used as background-image property in the CSS of the div.
If you know the aspect ratio of the image then you can create a responsive <div> which 'mimics' the native <img> element as the page resizes.
For example if you have an image that is 300x180 - then the aspect ratio is
1 : 0.6
(180/300=0.6) This means if the image is 100% wide, then it is 60% high.
.image {
background-image: url(http://lorempixel.com/output/nature-q-c-300-180-1.jpg);
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 60%;
}
See this jsFiddle
Related
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;
}
I'm implementing a design that has full-width images with a fixed height (or the height only changes at certain breakpoints). I want the image to always fill its container while maintaining its aspect ratio.
If I implement this as a background image, it's simple enough to add background-size: cover:
.cover {
width: 100%;
height: 500px;
background-image: url(myimage.jpg);
background-size: cover;
background-position: center;
}
http://jsfiddle.net/h7542mys/
If you try resizing the browser window, you'll see that the image covers the entire area by essentially scaling the image up.
The issue is that I want to change the image source depending on the resolution, so that I don't have to serve gigantic assets to mobile devices. If I knew the image URLs at build time, I could use media queries for that, however, these are dynamic images that I only know the URLs for at runtime.
At runtime, I can generate image URLs for cropped and resized images, so ideally I'd want to do something like:
<div class="cover">
<img src="getImageUrl('image.jpg', 320, 500)" srcset="getImageUrl('image.jpg', 320, 500) 320w, getImageUrl('image.jpg', 640, 500) 640w, getImageUrl('image.jpg', 1000, 500) 1000w" sizes="100vw">
</div>
And then somehow get the image to fill the container just like the background image would. But if I give the image a height and width of 100%, it's obviously just going to stretch. Giving the image a min-width: 100% will set it to be as wide as its parent, but the height will be smaller.
The only way I've been able to get it to work is using object-fit: cover, but that has pretty bad browser support, and the polyfills I've found haven't worked with srcset: http://jsfiddle.net/Lctosbru/
Essentially, I'd like to get the same effect as background-size: cover or object-fit: cover. Is there a way to do this?
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
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).
I have a background image with height 1400 and width 1000 , if i use any full screen background jquery plugin or code it crops from top or bottom and make it fit the whole screen but what i want is a plugin or code which will make sure the background image is responsive based on width of browser yet the full height of background image should be visible with scroll bar. currently it crops height from top and bottom.
if thats not possible atleast the crop should be only from bottom to maintain aspect ratio.
.background{
width: 100%;
height: 100%;
background-image:url(path/to/image.jpg);
background-position: top center;
background-size: cover;
}
This will only crop the bottom off, but make sure the image 'covers' the entire element.
Demo: http://jsfiddle.net/Rkf6Q/
To show 100% height, and have the width cropped, just set the background-size parameter to auto 100%
Demo: http://jsfiddle.net/Rkf6Q/1/