Have the same height with autoWidth enabled OwlCarousel - javascript

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/

Related

Product Image Container Size not fitting the image aspect ratio

I have a css issue where the product image containe for images, both portrait and landscape, with different heights does not adapt to fit the height of the actual image. The container height is based on the tallest image. See attached.
I have used the the following css on the container, but cant get adjust theigh height (shown in light blue)
Thanks
#image-23714742567097-0 {
width: 925px !important;
max-height: 550px;
object-fit: contain;
overflow: hidden;
}

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

Background Image with Full Height but responsive Width using Jquery

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/

Dynamically set <div> height & margins based on the same <div> width

I am creating a responsive site and I want to adjust a height based on it's width. This is going to be a parallax & responsive site. For the site's responsiveness, I decided to have a container element be adaptive and adjust size based on media queries. Then, this child will have a width of 90% or so.
I wanted to write either JS or with the help of JQuery to set the height & margins of this based on the new width at each break point. I think this would be easier then trying to set a new "px" height for each of these break points. And since I want to have some parallax effects, I need to set the s margins as % instead of pixels to get the same effect on multiple devices.
Please let me know if any of this doesn't make sense.
Thank you very much.
If you want the width and height to be the same, you could use:
width: 100vw;height: 100vw;
Here is another solution, for a resizable div that maintains a 16x9 aspect ratio. 9/16*100=56.25%
http://jsfiddle.net/ks2jH/512/
CSS:
.aspectwrapper {
display: block;
width: 90%; /* whatever width you like */
background-image: url('http://placehold.it/160x90');
background-size: cover;
background-repeat: no-repeat;
}
.aspectwrapper::after {
padding-top: 56.25%; /* percentage of containing block _width_ */
display: block;
content: '';
}
HTML:
<div class="aspectwrapper">
</div>

Stretching a background image vertically not in scale, not just cover - Can this be accomplished?

EDIT: The answer would allow the background image to change it's height depending on the size of the body. if the body is 500px high, it should be 100% width, 500px height. or 100% width 2500px height.
Maybe I'm missing the boat on this, but I'm trying to figure out how to have my background image scale with the page. The end user doesn't want for the background image to be static (COVER), but the image should scale with the bigger his content gets on his site.
I'm guessing this can't be done with CSS alone. When I say I guess I've been through a mess load of different ways of doing this.
Is this just a simple javascript/jquery where I get the height of the body tag, and then apply that to the background image height?
If you need an example:
<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>
CSS
body { background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; }
div { width: 75%; margin: 0 auto; }
.first { height: 1000px; }
.second { height: 500px; }
http://jsfiddle.net/WEat7/
This would need to work on multiple pages with different body heights
EDIT: http://jsfiddle.net/WEat7/1/
Fixed widths on the divs to illustrate the concept. I apologize
body {
background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat;
background-size:100% 100%;
}
http://jsfiddle.net/WEat7/
The following CSS should fix the background image and have it cover the entire body no matter what size the width or height - see demo
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
background-size:cover;
}
However, please note that IE8 does not support background-size.
Edit: updated demo using following CSS
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
background-size:100% 100%;
}
Add to your body css:
background-size:100% 100%;
It seems that we need a wrap answer ))
It has been suggested above that background-size: 100% 100%; will stretch the background image to the full width and the full height. And so it does.
Say your content is small (400px) - the background image will cover only 400 - http://jsfiddle.net/skip405/WEat7/7/
Say your content is really huge (2500px) - the background image will still cover the full height - http://jsfiddle.net/skip405/WEat7/8/

Categories

Resources