Background Image with Full Height but responsive Width using Jquery - javascript

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/

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;
}

Have the same height with autoWidth enabled OwlCarousel

I want to show a little gallery in my website, but the images are not responsive with the AUTOWIDTH CODE, and they don't have the same height.
I create a JS Fiddle so I can explain my self better.
https://jsfiddle.net/w6axkqmz/1/
I tried using this CSS
.gallery .owl-carousel .owl-stage {
display: flex !important;
}
.gallery .owl-carousel .owl-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
But leave the rectangular images as a square.
Do not set height:50vh it is going to set the height of every image to 50% of browser's viewport's height. But without setting the height, object-fit is not going to work. Set height as 100% so that it will be of the same height of gallery.
Relative JSFiddle https://jsfiddle.net/2psgqb3v/
The reason you need width and height set is because for browser needs to fit the image/object to that height. If you don't specify that, then browser will take image's height/width to render.
The solution is to have media query to set the width and height of the images.
Relative fiddle https://jsfiddle.net/74rok0yg/

HTML div background stretch

How can i stretch background in div, while background would stretch to fit the screen resolution. In that div i want to have just navBar located top-right. Want this div just for intro page. There will be more content in others div behind that.
background-size:100%;
to your css underneath background-image.
choose the dimension that you want
background-size: 30px 40px;
div {
width : 100vw;
height : 100vh;
background : url('path/to-image.jpg') 50%/contain;
}
If you don't care about stretching and or distorting the image, then you can do what Melik said and set background value to...
background : url('path/to-image.jpg') 50%/100% 100%;

Get image height and width from a dataurl

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

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

Categories

Resources