Искажения картинки, CSS,HTML как исправить?

Нужен код, чтобы понять где ошибка. Скорее всего, у блока для трейлера заданы определенные размеры, типо width: 300px;height: 200px; , но обложка по ширине больше и пропорции теряются.

Andrej Sharapov,

Вид

<div class="shortstory-in shortstory-trailer">
<div class="shortstory radius-3">
	<div class="short-images radius-3">
        <a href="{full-link}" title="{title}" class="short-images-link">
            <img src="{image-1}" alt="{title}" />        	                             
            <span class="short-trailer">
                <i class="fa fa-play"></i>
            </span>                      
		</a>
	</div>
    <div class="short-content">
    	<h4 class="short-link"><a href="{full-link}" title="{title}">{title}</a></h4>
    </div>
</div>
</div>

вот сам css на блок

.short-images .short-images-link {display:block; position:relative; overflow:hidden}
.short-images short-images-link:before {
	position:absolute; left:-100%; top:0; width:100%; height:100%; z-index:2; background:rgba(40,40,40,0.3); content:"";
	transition: all 300ms ease-in; -webkit-transition: all 300ms ease-in;
	-moz-transition: all 300ms ease-in;	-o-transition: all 300ms ease-in; -ms-transition: all 300ms ease-in}
.short-images short-images-link:hover:before {
	left:0;	transition: all 300ms ease-in; -webkit-transition: all 300ms ease-in;
	-moz-transition: all 300ms ease-in;	-o-transition: all 300ms ease-in; -ms-transition: all 300ms ease-in}

/*owl-random*/
.owl-random {border-radius:3px; margin-bottom:20px; background:#304156; overflow:hidden;}
.owl-random .h-owl {margin:20px 0 0 0; padding-left:22px}
.owl-random .owl-box {margin:20px}
.owl-random .owl-pagination {position:static;}
.owl-random .shortstory {background:#526480;}
.owl-random .short-images a img {border:3px solid #304156}
.owl-random .short-link {background:#38495C;}
.owl-random .short-link:hover {background:#24303D}

/*short-images*/
.short-images a img {width:100%; display:block; height:auto; border:3px solid #222933; border-radius:3px;}
.shortstory-trailer .short-images a img {height:auto}
.shortstory:hover .short-images a img {opacity:0.8}

@media (max-width: 467px) {
	.short-images a img {height:auto}
	#related-news .short-images a img {height:auto}
	.owl-random .short-images a img {height:auto}
	.shortstory-trailer .short-images a img {height:auto}
	.owl-trailer .shortstory-trailer .short-images a img {height:auto}	
}
@media (min-width: 468px) {
	.short-images a img {height:290px}
	#related-news .short-images a img {height:250px}
	.owl-random .short-images a img {height:250px}
	.shortstory-trailer .short-images a img {height:170px}
	.owl-trailer .shortstory-trailer .short-images a img {height:150px}
}
@media (min-width: 600px) {
	.short-images a img {height:390px}
	#related-news .short-images a img {height:380px}
	.owl-random .short-images a img {height:380px}
	.shortstory-trailer .short-images a img {height:200px}
	.owl-trailer .shortstory-trailer .short-images a img {height:180px}
}
@media (min-width: 768px) {
	.short-images a img {height:320px}
	#related-news .short-images a img {height:290px}
	.owl-random ..short-images a img {height:300px}
	.shortstory-trailer .short-images a img {height:150px}
	.owl-trailer .shortstory-trailer .short-images a img {height:220px}
}
@media (min-width: 992px) {
	.short-images a img {height:230px}
	#related-news .short-images a img {height:185px;}
	.owl-random .short-images a img {height:220px}
	.shortstory-trailer .short-images a img {height:150px}
	.owl-trailer .shortstory-trailer .short-images a img {height:210px}
}
@media (min-width: 1200px) {
	.short-images a img {height:275px}
	#related-news .short-images a img {height:250px}
	.owl-random .short-images a img {height:285px}
	.shortstory-trailer .short-images a img {height:180px}
	.owl-trailer .shortstory-trailer .short-images a img {height:240px}
}

img {
  object-fit: containt; /* or cover */
}

Сергей delphinpro, пробовал, из большой картинке виден центр случаем с cover с containt делает ее миниатюрной, теперь видно херовасто :-D

но мне надо именно подогнать под размер автоматом, с этим беда!

Eneiger, ссылку покажите лучше...

Максим Ленский, на локалке

Eneiger, ну тогда извените ..

Максим Ленский, могу скайп кинуть

Eneiger, мне или темвивер надо или url

Максим Ленский, давай в личку щас скачаю

Максим Ленский, тут лички же нету

Eneiger, у меня в ЛК есть email - скинь туда logn и pass от teamviewer

Eneiger,
contain - это вписать картинку в отведенную область с сохранением пропорций без обрезки
cover - заполнить отведенную область с сохранением пропорций, обрезая лишнее.
третий вариант - как у вас изначально, с искажением пропорций.

Других вариантов НЕТ! Чисто физически это невозможно. Сами подумайте.

Если вам нужно полное заполнение без искажений, остается только отфотошопить картинку

Максим Ленский,

ну тогда извените ..

извените
зы. вы лучше включите проверку правописания в браузере...

Максим Ленский, Спасибо большое, помог!

Сергей delphinpro, а... это ерунда уже