Картинки в галлерее растягивает

[Eugene777 0]

Картинки в галлерее растягивает слишком сильно. Уже пол дня  css в engine.css ковыряю, никак не получаеться настроить, чтобы сохранялся оригинальный размер.

Поделитесь, пожалуйста, кто преодолел уже этот вопрос, css кодом.

 

ссылка на проблемную галлерею:

http://danation.ru/fotografy/25-detskaja-fotografija.html

xfieldimagegallery {padding: 15px; list-style: none; clear: both; background-color:white;}
.xfieldimagegallery:after {content: ""; display: table; clear: both;}
.xfieldimagegallery li {list-style: none; margin:0;}
.xfieldimagegallery li img { display: block; float: left; margin:2px; width: 310px; height: 207px;}
.xfieldimagegallery li img:hover {box-shadow: 0px 0px 7px rgba(0,0,0,0.4);}
.btn.disabled, .btn[disabled], fieldset[disabled] .btn {cursor:not-allowed; pointer-events:none; opacity:0.65;}

 

Изменено 8 сентября 2020 пользователем Eugene777

[germanydletest 455]

Для сохранения "оригинального" размера, достаточно убрать заданную ширину и высоту 310рх и 207рх

.xfieldimagegallery li img { display: block; float: left; margin:2px; width: 310px; height: 207px;}

 

[Eugene777 0]

Уточню задачу:

ширина и высота 310рх и 207рх должна оставаться, но картинку не должно искажать. То есть она красиво, без искажений, должна влезать в заданную уже ширину и высоту 310рх и 207рх

Под искажениями я имею ввиду, что она не должна быть растянута по одной из сторон, что уничтожает пропорции.

Изменено 8 сентября 2020 пользователем Eugene777

[master27 38]

https://html5book.ru/svoystva-object-fit-i-object-position/

[Eugene777 0]

Спасибо, делал это уже, но сейчас оказалось, что у меня этот тег браузер не потдерживал. Сейчас проверил на другом - всё ок