Example: Image size - 1000_w-x-542_h
auto
width: auto; => set the height to 275 ==> The auto width is 507.
100%
width: 100% => set the height to 275 ==> The image fill-up the avaiable space no-matter what (= Strech/destroy-aspect ratio).
In general, for responsive images you should use:
width: 100%;
height: auto;
“Crop effect”
If you want height of 275px no matter what without destroy the aspect-ratio you should use object-fit: cover. Her example for 16:9 aspect ratio: