image formatting

can you set all image heights to match with css no stretching

Posted in image formatting
2569
4:32 am, November 9, 2022
 

can you set all image heights to match with css no stretching

Short Answer: Yes with object-fit: cover; on the css of the image properties. 

object-fit: cover;

You might also need: 

object-position: right bottom;

..

HTML

<h3>Images that are all over the place</h3>
<p>images that do not look nice and formatted in a grid.</p>
<div class="image-heights">
	<img src="https://picsum.photos/100/300">
  	<img src="https://picsum.photos/300/200">
  	<img src="https://picsum.photos/100/220">
	<img src="https://picsum.photos/100/300">
  	<img src="https://picsum.photos/300/200">
  	<img src="https://picsum.photos/100/220">
</div>
<hr>
<h3>Add object fit and apply a height and width</h3>
<p>add a class to these images and they all line up nicely with no stretching of the images</p>
<div class="nice-heights">
	<img src="https://picsum.photos/100/300">
  	<img src="https://picsum.photos/300/200">
  	<img src="https://picsum.photos/100/220">
	<img src="https://picsum.photos/100/300">
  	<img src="https://picsum.photos/300/200">
  	<img src="https://picsum.photos/100/220">
</div>

CSS

.nice-heights img {
	height:200px;
  	width:200px;
  	object-fit: cover;
  	object-position: left top;
  	margin-bottom:5px;
  	margin-right:5px;
}

Images that are all over the place

images that do not look nice and formatted in a grid.

Add object fit and apply a height and width

add a class to these images and they all line up nicely with no stretching of the images

Posted in image formatting
2569
4:32 am, November 9, 2022

View Statistics
This Week
36
This Month
104
This Year
502

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Items in image formatting
can you set all image heights to match with css no stretching
Related Search Terms
image formatting Object Fit 7
image formatting http 18
image formatting tricks 33
image formatting photos 48
image formatting object fit 42
image formatting object 38
image formatting margin 34
image formatting height 34
image formatting form 36
image formatting Tricks 30
image formatting Block 29
image formatting they 38
image formatting block 33
image formatting apply 37
image formatting image 43
image formatting object-fit 46
image formatting Image 34
image formatting Photos 36
image formatting mage 48
image formatting nice 43
image formatting the 43
image formatting that 46
image formatting pre 49
image formatting https 53
image formatting grid 51
image formatting css 62
image formatting Images 47
image formatting CSS 42
image formatting image formatting 62
image formatting picsum 40
image formatting images 59
image formatting Height 42
image formatting with 52
image formatting code 39
Other Categories in Code
alpine js apps c css factorio font awesome images linux quick modals sqlite site bugs site updates slick slider sliders testing windows apps apache api apps asp bat bootstrap bootstrap templates charts cookies core css css filters css grid design elements docker domains emoji fancybox fonts foundation framework gimp git html icons ideas image formatting images javascript javascript functions jquery js linux mac misc modals mysql nginx node php php errors php function php functions php simple html dom pi400 python react regex sections simple_html_dom simplepie php site bugs site documentation slick slider sql sqlite ssh sublime svg svg css templates tools virtual box vscode vue webdev windows windows 11 windows commands wordpress
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
"We're tight-fisted with property and money, yet think too little of wasting time, the one thing about which we should all be the toughest misers.”
Seneca
Random CSS Property

background-position-y

The background-position-y CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by background-origin.
background-position-y css reference