In our Firebase storage, we have images that have widths of 1080 and varying heights. Using this extension (https://firebase.google.com/products/extensions/storage-resize-images), we need to resize the width to 480, maintaining the aspect ratio. How can this be accomplished using this extension? It allows us to specify dimensions, but not what we need.
If this extension can't do this, what are similar alternatives?
From here
For example, say that you specify a max width of 200px and a max
height of 100px. You upload an image that is 480px wide by 640px high,
which means a 0.75 aspect ratio. The final resized image will be 75px
wide by 100px high to maintain the aspect ratio while also being at or
under both of your maximum specified dimensions.
I was also initially confused by this. In summary, the dimensions you specify are the maximum values of either dimension; depending on the aspect ratio, one or both of these values will be used, and aspect ratio will always be maintained.
Related
I have a body container for the img object. I want to resize images that overflow this body's WIDTH (which keeps resizing according to browser/tab/mob) to maintain aspect ratio. I have to come up with a box-based solution wherein if the current width is w, then both height and width of image should be <= w pixels and still maintain aspect ratio. Using only CSS.
do you mean you want to have the img at a certan size and keep the ratio? if so you could do a width tage and then the height would stay with the same ratio
Is it possible to have an image of arbitrary dimensions fit within a given width and height, but without using a fixed container?
Obviously it's easy enough to create a container of specific dimensions and have an img fit within that, however that potentially leads to additional whitespace within the container along the dimension where an image's aspect ratio is shorter or taller than the container.
Is it possible to tell an image:
it should be as large as possible
maintain its aspect ratio
never exceed width of a
never exceed height of b
contain no whitespace
To be clear, this needs to involve only CSS and no knowledge of the images' dimensions at runtime.
img{
object-fit: cover;
}
you can check more about object-fit here
You can achieve this using the CSS Property object-fit: cover;.
That will tell the image to maintain its aspect ratio, never exceed the containers width and height and not have white space, but in order to keep the aspect ratio and still fit within the container without white space it will cut off the sides of the image.
I am trying to set the aspect ratio for a front page image that is almost full width. Currently as the screen gets smaller it decreases in width faster than height and looks skewed as a result.
I was thinking to use a media query to set brake points but that would mean some skewing inbetween the break points so I would prefer to use something that locks the height to the width and therefore keeps the aspect ratio. Can someone tell me how to do this in wordpress?
site(http://www.taranoone.ie/)
I am using WooSlider to display a gallery for each project of mine. Many of my projects are in HD aspect ratio (1280x720) while other older ones are SD (720x540).
The problem I am having is that I would like to make my site width 1280px wide but since WooSlider sets it's size according to the website width, the SD images would be enormous in vertical height (around 960px). The HD images look fine since they remain at 1280x720px.
Since I cannot restrict the width of the slider as 1280 works great for HD images, I thought perhaps it's possible to restrict the height of the slider so that it will crop the gigantic SD images. Cropping would be ok so long as the SD images stay centered within the crop. But I would need the slider to remain responsive so a fixed height won't do.
So is this possible? To restrict the maximum height of WooSlider, while still allowing it to be responsive?
Alternately, if I could check the width of the slider images, I could possibly restrict the height only when images are in SD format, while leaving the HD ones unaffected.
Here is an example of my website at 1024px wide, displaying SD images. As you can see, even at 1024px, the vertical height of the scaled SD images in the slider is very large so at 1280px it would be enormous:
http://richardrosenman.com/portfolio-items/kraft-dinner-pimp-my-ride/
Any suggestions or info welcome.
What does it have to do with php? For me you should just add max-height attribute to wooslider class in CSS.
A client wants to have an image that takes up entire screen, on mouse over the menu would appear. The problem is the height vertical alignment for various screen sizes....What would be the most common sleek looking solution to this issue? Let's assume that the most common screen resolution for the site's audience is 1024x768 but it should look good on smaller resolutions too (specifically for laptops).
My initial idea was to use an image such as 1000x600 and black background...any other ideas?
Thanks!
Compare the aspect ratio of the screen with the aspect ratio of the image, then scale the image appropriately. For example, if the aspect ratio (width / height) of the screen is larger than the aspect ratio of the image, then it's too wide - so scale the width of the image but keep the height the same size as the viewport. Visa versa for if it's smaller. I think you can use PHP to achieve what you want.