Situation: I have a site with images/pictures and I would like to set them nicely.
Problem: In my CSS max-height property works fine but when any image/pic reach the max-height 15% the width of any image doesn't stop, they get wider and wider by resizing browser or using wider resolution.
Question: The pictures aren't nice, so how to stop img width auto resizing when any img reaches the max 15% height on my page?
What I need: I want a totally fluid site by percentages and img widths doesn't matter, only the max-height must be 15% and keeping the img ratio in any situation.
At the moment the tag properties are in my css:
img {
height: auto;
max-height: 15%;
}
Related
I have an image which width should be as large as possible and I want it's height to not exceed the height of the parent while also maintaining the aspect ratio of 16:9. The issue right now is, it works well till the screen size is 1591px, if it gets bigger than that, the height exceeds and the vertical scroll bar appears. I don't want that behavior. How can I achieve that?
the scrollBar appears because of the overflow you can do 2 things
use the "overflow: hidden;"
body{
overflow: hidden;
}
you can use max-width to determine the max-width of the element and set it on both of the elements
I hope it was helpful 😁
UPDATE: the original answer assumed from the question that the image was an HTML img. The solution was to set width to 100% [of its container] and height to 70vh and use object-fit.
However, it is not an img it is a canvas.
The required aspect ratio is known to be 16 / 9. This snippet therefore sets the max-width to 100% (of whatever is the container) and the max-height to 70vh.
This way there can never be any overflow and the canvas will be as big as it can be within those constraints.
body {
width: 100vw;
margin: 0;
}
canvas {
max-width: 100%;
max-height: 70vh;
aspect-ratio: 16 / 9;
background: green;
}
<canvas width="1600" height="900"></canvas>
I have a div with three images (in varying aspect ratios) in it. Lets say image1 is 16:9, image2 is 4:3, and image3 is 1:1.
I want all images to have the same height, so I set their height to 100% and their width to auto.
Now I want to scale the whole div up so that it takes 100% of the container, or in my case 100vw.
The goal is that the height of the div scales up accordingly, so that the images in the div scale up too, so that in the end I have a row of 3 images that take up 100vw and all have the same height.
The problem is that I can't get this to work. When I give the div a fixed height, the images scale up properly, but I want it the other way around, so that the height of the div is flexible and the height of the images gets scaled up until the whole row fills 100% of the container of the div.
Can someone help?`
What I have:
.gallerygroup3 {
height: 500px; /* <-- Works widht a fixed height, but not with 100% or anything else */
width: 100vw;
}
#gallery img {
width: auto;
height: 100%;
}
Try changing the width : auto; in #gallery img to width : 33.33vw (since there are 3 images), then try changing the div's height, and it should work. Hope this helps! :D
I can't get this simple slideshow to re-size correctly. When I shrink down the window, the image width compresses, but the height does not, and I want the height/width ratio to remain the same as the viewport shrinks. I know the fault lies somewhere in my CSS, and but I can't track down the issue. Any help appreciated.
Just use height: auto
.slides img {
height: auto;
/* Rest of you code */
}
I have a set of logos of variable size. I've set them all up at the same height of 50px with a width of auto:
.img-logo {
width: auto;
height: 50px;
}
This works fine until the window is resized. When the window is resized, wider logos flow outside of their container.
I would like the logos to shrink to fit their container width. I have tried to achieve this with max-width:
.img-logo {
max-width: 100%;
width: auto;
height: 50px;
}
This works but the aspect ratio is compromised due to the height property remaining 50px.
Any ideas?
With a fixed height and variable width either of the below can happen.
The img gets stretched to accommodate the variable width and skew the aspect ratio.
The img gets cropped (overflow:hidden) by the parent but the aspect ration is kept intact.
So you can make the img responsive too. But then it wont have the constant height, while keeping the aspect ratio intact.
I think it's impossible to keep its size when the window is too small and you didn't want to change ths size of image. Why not try #media,which can provide different css styles in different conditions.
I have set up a web page using an image in a div called slideshow. The div is supposed to be a max-width of 1600px and a max-height of 600px (width and height of the original jpg used here) and to shrink down dynamically when the screen is smaller or resized.
This works fine because the behavior of the image is set by CSS as follows :
.slideshow img{
margin:0 auto;
width: 100%;
max-width: 1600px;
min-width: 900px;
}
Now I would like to achieve the same effect by replacing the image with the Camera Slideshow from Pixedelic. But here I can't control the image with .slideshow img{} since the script uses a div instead of the image tag.
Width and height of the camera slideshow are controlled by a jQuery function.
I have put the slideshow in a .slides div which I try to control by CSS, like this :
.slideshow .slides{
display: block;
margin:0 auto;
max-width: 1600px;
max-height: 600px;
overflow:visible;
}
(Overflow is left visible to see what happens)
When I assign a height value (ie 600px) in the function, the slideshow loads at it's max height but doesn't shrink when the page is resized down : http://www.centredelafontaine.be/testpage1.html
When I leave height and width values blank in the function, the slideshow shrinks on resize but opens with a height of 800px (?) and crops the even greater image inside, overflowing the div placed below : http://www.centredelafontaine.be/testpage2.html
Can anyone help me on this issue ?
Place a img tag inside the div which is contained by the slideshow and you will be able to modify those image (slideshow elements) proprieties through the CSS code.
<div id="image" div class="Slides w3-display-container">
<img src="your_image.png" height="600" width="1600">
</div>
If you can't work it out leave me a reply and I'll make a demo html
Set only image min height. Slidehow container will depend on image height. Means no need to set slidehow container height.
You can set the portrait property to true and the images will not be cropped.
jQuery('#your-camera-gallery').camera({
portrait: true,
});