I'm developing a Web site for a professor and I'm having an issue with my CSS in Firefox. The Web site was designed to be fluid width/height so it would fill the screen on any resolution, so because of that I'm using a lot of percentages for heights and widths. I've run into a problem with images however.
http://projects.mediabounds.com/i.bradley.edu/
The top bar of thumbnails should scale the images, but it doesn't work in Firefox, the images stay 100% their original height. It works fine in Safari (don't know about Internet Explorer). I've set the height to 100% and width to auto. I expect it to scale the image to 100% the height of the div and then adjust the width accordingly.
Can anyone point out what I've missed?
You need to give the image a height of 100% but it's parent element needs to be the desired height and width in percentage.
Basically make a DIV containing the image, give the DIV the desired width and height in percent or px. Place the image inside the DIV and give it 100% height.
That's just the way Firefox handles images.
I bumped into this as well and I managed to get a consistent height across multiple browsers using vh units in CSS, for example max-height: 5vh; as in 5% of the viewport height.
Related
My app is forced to Portrait mode. I am using landscape images as clickable buttons in various locations. But I am having a hard time figuring out the best width/height ratio for the images so that no matter the smartphone screen size the image will retain a good ratio.
I need the images wide enough so that it will fill the full width of the screen but also with proper ratio that if it needs to shrink to fit the screen width that the height will adjust proportionately.
I have been toying with 480 x 120 (4 to 1 ratio) but I am noticing on screens of 360 width the image height should be 90 but the height is actually coming out as 82 - cause the image to be skewed. Also, on some devices like iPads, 480 isn't wide enough so I am forcing the image to width:100% of the container div and then that skews the image as well.
I have done reading on this in multiple places but there seems to be no consensus or best practice that I can find.
I want to show another image on hover and due to the layout of the homepage I need to use sprite to do it. I've got it working fine, but I'm using fixed width and height for the container.
You can see my JSFiddle here:
http://jsfiddle.net/mckeene/fhk0byqt/4/
The problem arises when I want to make it responsive. I can use max-width: 100%, but what about the height?
OK, this solution is based on the known fact that some properties like padding-top and margin-top, when given values in percentage, are calculated based on the width of an element rather than its height.
Making an element “as high” as required by the known dimensions of a responsive image can be done by using padding-top – I used a value of 66.54% here based on your image’s dimensions (half the image height divided by the width, times 100) to span the container element up to the required height.
Now normally to display the upper half of an image first, and then the second half on hover, I would use absolute positioning – but we can’t use top here, since a value in percentage for that property would be based on the height. But luckily, as already mentioned, margin-top is one of those properties where percentage is calculated based on the width – so we can use margin-top: -66.54% here to “pull” the image up over its container’s padding first to show its upper half, and then double that (margin-top: -133.1%) to pull it up even further on hover, to show its lower half.
I have two divs with width of 30% and 70% and fixed height as height:100vh; Because the project needs to have the slider to be always the height of the screen you are looking at.
But I cant seem to figure out how to fix the aspect ratio of the images? As you can see in the test link that the images are narrow?
here is the link : [broken link removed]
note that this is the prototype that I am building so its still ugly as **** :)
and sorry im not too good at coding (still learning)
Your image is stretching because you've set both the width and height to 100%, so the browser is making the image width fit the div width (which is thinner than the aspect ratio of your image).
The quick fix is to amend your CSS as follows:
.cycle-slideshow img {
width: auto;
height: 100vh;
}
This tells the browser to set the height to 100% and then resize the width accordingly to keep the image the correct aspect ratio.
Although, you may want some fall back for if the browser window is much wider than it is tall, as then you'll see the edge of the image.
I wan't to set my product thumbnails in Magento to proportionally fit the frame.
At the moment if I upload a rectangular image, the thumbnail will display the width of the rectangle and will leave the space left as white.
I need it to proportionally zooms in the image until both the width and height is met.
Been looking for extensions that do this, but no luck so far!
Here is a page that will help with the image options http://blog.chapagain.com.np/magento-resize-image/
The option to stop it rendering the white space is:
->keepFrame(FALSE);
You may need to also play with some of the other options to get it to your minimum dimensions. There aren't any options that clip the image, so you'll have to hide the excess image in css with overflow:hidden;
I am designing a picture in Expression Blend. I need some help with the sizing of the images. If I don't specify any size, it will render the image at full size, but I want it to be restricted by height and width. If the window resizes, the images should resize.
Set the Stretch property to Uniform.
Have you tried setting the height and width of the picture to 100%