How can I make all images of different height and width the same via CSS?
Updated answer (No IE11 support)
img { float: left; width: 100px; height: 100px; object-fit: cover;}
<img src="http://i.imgur.com/tI5jq2c.jpg"><img src="http://i.imgur.com/37w80TG.jpg"><img src="http://i.imgur.com/B1MCOtx.jpg">
How do I make all images of similar size?
Not sure if I understood the question correctly, but take a look of this as follows.
.photo { text-align: center; /*for centering images inside*/}.photo img { width: 300px; /*set the width or max-width*/ height: auto; /*this makes sure to maintain the aspect ratio*/}
<div class="photo"> <img src="http://dummyimage.com/600x200"/> <br/> <img src="http://dummyimage.com/500x200"/></div>
Image height same as width
Many of us had given you some hints in the comments, so by now you should be able to create a responsive square.
Fit the image inside the square
Just in case you are missing the last part, here is how you can fit the image (with any aspect ratio) into that square. It also means that your image will be cropped if it's not squared.
Snippet:
.container {
position: relative;
width: 37%; /* The size you want */
}
.container:after {
content: "";
display: block;
padding-bottom: 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}
.container img {
position: absolute; /* Take your picture out of the flow */
top: 0;
bottom: 0;
left: 0;
right: 0; /* Make the picture taking the size of it's parent */
width: 100%; /* This if for the object-fit */
height: 100%; /* This if for the object-fit */
object-fit: cover; /* Equivalent of the background-size: cover; of a background-image */
object-position: center;
}
<div class="container">
<img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
</div>
Related Topics
Make Content Horizontally Scroll Inside a Div
Open an Exe File Through a Link in a HTML File
Grid Items Overflow Out of Parent Container Using CSS Grid
How to Put CSS @Media Rules Inline
How to Divide Div Color With 30% Different Color and 70% Different Color in Vertical Using CSS
What to Do Regular Expression Pattern Doesn't Match Anywhere in String
Css Overflow-X: Visible; and Overflow-Y: Hidden; Causing Scrollbar Issue
Transform3D' Not Working With Position: Fixed Children
Auto Detect Mobile Browser (Via User-Agent)
Floated Elements of Variable Height Push Siblings Down
How to Properly Escape Quotes Inside HTML Attributes
Print Header/Footer on All Pages (Print Mode)
Html - How to Get My Text Next to My Icon
How to Remove Unwanted Space in This Table
Moving an Image Across a HTML Canvas
Css Margin Terror; Margin Adds Space Outside Parent Element