Yes, this is possible. You can set up a dedicated style in the CSS and apply this style to the images you want to format this way.
Here are some possible scenarios I can think of. In a nutshell, images can be square or not. This results in multiple possibilities of how to deal with it:
- Brute-forcefully scale an image up or down to a certain fixed width and height (non-square images will be stretched).
- Scale an image proportionally up or down to a fixed width with automatic height.
- Scale an image proportionally up or down to a fixed height with automatic height.
- Scale an image proportionally down to a maximum width with automatic height.
- Scale an image proportionally down to a maximum height with automatic width.
- Sclae an image proportionally down until both conditions of a given maximum height and width are met.
(These are the possibilities I can think of right now.)
Some examples:
Fixed width and height of 100px
Scales an image up or down to a fixed width and height of 100px.
Non-square images will get stretched either horizontally or vertically.
img.MyImages {
width: 100px;
height: 100px;
}
Fixed width of 100px and height automatically
Scales an image up or down to 100px width.
Height is scaled automatically (proportionally).
img.MyImages {
width: 100px;
height: auto;
}
Maximum of 100px width and height automatically
Scales an image down to a maximum of 100px width if the image is larger than 100px in width.
Height is scaled automatically (proportionally).
Images smaller than 100px in width will not be scaled.
img.MyImages {
max-width: 100px;
height: auto;
}
Maximum of 100px in both height and width
Scales an image down to a maximum of 100px width if the image is larger than 100px in width.
Scales an image down to a maximum of 100px heigth if the image is larger than 100px in height.
The image is scaled down proportionally until both conditions (100px width maximum and 100 px height maximum) are true. For non-square images either height or width will become smaller than 100px depending in the image width/height ratio.
Images smaller than 100px in both height and width will not be scaled.
img.MyImages {
max-width: 100px;
max-height: 100px;
}
1
Reply
AdChoices