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

Question

[Eneiger]

Здравствуйте, столкнулся с таким вопросом!
Как убрать искажения картинки при помощи CSS и HTML



Как видно что везде нормально, но с блоком трейлер не чего поделать не могу!

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

Comments

[Andrej Sharapov]

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

[Eneiger]

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}
}

[Сергей delphinpro]

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

[Eneiger]

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

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

[Максим]

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

[Eneiger]

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

[Максим]

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

[Eneiger]

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

[Максим]

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

[Eneiger]

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

[Eneiger]

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

[Максим]

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

[Сергей delphinpro]

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

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

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

[Сергей delphinpro]

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

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

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

[Eneiger]

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

[Максим]

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

Answer 1

[Александр Алексеев]

к картинке
object-fit: cover