So, I have a popup that opens for a gallery. The width of the image in the popup is set to 100%, stretching to fit it's containing div. And, the height is set to auto, so the height will resize, depending on the width (same ratio). This is great for wide images ... but for tall images, the tall images get cutoff at the bottom of the page. If the height is too tall (and the image is cutoff), then I want the height to shrink to a different size, and the width to adjust. I tried max-height, but that skews the image ratio (shrinking the height, but not affecting the width). Anyone have a better solution?
You can see the problem here:
Webpage
Click the image of the outside white door, with the flower bushes (the 8th image). You will see that the image is too tall for the page, and gets cut off at the fold.
Here is an image of the issue
Any ideas?
Do you want to have a CSS-only solution? Are you able to use Javascript?
If you can use Javascript you could add a condition to see if the height of the image is bigger than the window height and in this case add a class to change the behavior of the image.
var img = document.querySelector("img"); // Add correct selector here
if ( img.height > window.innerHeight ) {
img.classList.add("maxHeight");
}
img {
width: 100%;
height: auto;
}
.maxHeight {
height: 100%;
width: auto;
}
Related
I have a gallery (responsiveslides.js) that is launched within a jquery mobile popup that overlays the window. The desired look is to have the gallery scale based on the browser window.
Here is a stripped down working example of my setup and issue: https://jsfiddle.net/02ds2trp/
What I'm trying to accomplish is to have the popup div height match the scaled image. The blue background is ok on the sides of the image but I don't want it on the bottom/top. ie. the orange border should be tight to the image. Also the popup div shouldn't grow more then 70% of the screen.
Right now I have .popupGalleryBannerDIV with height:70% but that is growing it too big, removing that makes the image gallery have no height.
.popupGalleryBannerDIV {
position: fixed;
width: 100%;
background: #2795EE;
top: 15%;
left: 0px;
height: 70%; /* how to I make this dynamic? */
max-height: 70%;
}
Note: I've been playing with this for a week so some css markup on fiddle might be from failed attempts.
I'm having trouble figuring out how to make this work any help would be appreciated.
Edit:
Add some picture to help understand what I'm trying to do.
View post on imgur.com
Part of the problem, is that your slide is using a background image which has no default height/width on it's own. It's the content that dictates how much space should be filled up.
My suggestion is to use an tag instead or have some js function that will appropriately size the viewport height to match the image's ratio based on the viewport width.
This is how I ended up coding the size change:
function gallerySize() {
//set height of content to 70%
$('.popupGalleryBannerDIV').css("height", "70%");
//check img size compaired to it, of large set image height to height of content
var imgHeight = $('.popupGalleryBannerDIV').find('img').height();
//else if height is smaller set conect to height of img
if (imgHeight < $('.popupGalleryBannerDIV').height()){
$('.popupGalleryBannerDIV').css("height", imgHeight);
}
}
I have an image something like below.
<img src="file.jpg" />
Below is the css code
img {
max-width: 100%;
height: auto;
}
Can anyone explain me on how does this css code make the images responsive, I mean scale it perfectly. I want to know the working behind this css code.
When your parent width is smaller than width of image, image width will take 100% of parent width.
If parent width is bigger than image width, image width will stay original.
Same with max-height. Also min-width/min-height will ensure that width/height will not be smaller than specified.
height: auto; will preserve aspect ratio for image. If you set both max-height and max-width or set height to specific size than image will be stretched
When you apply max-width:100%; to any element then that perticular element could have maximum 100% width of its parent, thus it can give you gaurantee that child will never go out of parent's bounds.
Thus if parent has suffitient width then child is shown in it's original size, otherwise it's width is matched to the parent. Thus it make our layout responsive.
Here is example : http://jsfiddle.net/xxn2hfuL/
I have the following html
<a class=logo></a>
I want to replace it with my logo. But I want the logo to take up 100% of the vertical room, and an amount of horizontal room that will leave the image proportional
I could try to do
.logo {
background-image: 'logo.svg';
background-size: auto 100%;
}
except I would still need to set a height and width in order for it to take up space.
I could try to do
.logo:before {
content: url('logo.svg');
}
except the only way to set the height and width of the image is with
zoom: X%
or
transform: scale(50%);
and neither of these will react to changing heights
Is there any other way I'm missing?
Edit: fiddle - how can I get the width correct here?
If you're wanting a proportional box with 100% width and a height that matches the aspect ratio of the background-image, set the vertical padding to a percentage that matches the vertical ratio.
i.e. if your logo is a 2:1 rectangle, set your width to 100% and your padding to 25% 0 and your tag will stay proportionally sized (you'll need to set it to display: block;). Then background-size: 100% auto (or the other way around) should work because the background image's aspect ratio is the same as its container.
fiddle
I'm trying to show the original size of the image. Often that's bigger than the width of the div that's containing it.
In modern browsers, it gets automatically resized to fit the parent div. Even when I use overflow: auto the image still gets resized.
So how can I prevent the image from getting resized when the outer div has a set width?
Thank you!
Bootstrap have maximum width set to 100% on images. Change it:
img {
max-width: none;
}
I used this one img {min-width:100%}
If you've ever shrunk down your browser window, you'll notice that the webpage content shrinks down to some extent and then scroll bars start appearing. How is that done in CSS?
If I understand your question correctly, you are looking for the min-width property instead of a fixed width, so that the content can shrink down to a certain size.
.some-shrinkable-element {
width: 30%;
min-width: 100px;
}
This would create an element that is 30% the width of its parent, and will shrink as you make your window smaller, untill the element reaches 100px, then it stuck on that width.