Супер блоки под видео

@Azzar90 · Регистрация: 22.07.2017

Author24 — интернет-сервис помощи студентам

Всем привет.Знаете я вот имею сайт и решил разработать странички под видео(я только не давно начал изучать адаптивную вёрстку медиа запросами).Но у меня несколько проблем с этим.Вот если вы зайдёте по ссылке http://fruity-sky.ru/vid.php вы увидите сайт с описанием видео и первая проблема заключается в том что картинки имеют разные размеры и в блоке красном я прописал padding:3px 4px
и как я заметил на многие картинки этот нижний padding не влияет так как картинки слишком большие.Как я знаю многие делают как то так,не прикасаясь к фотошопу чтобы укорачивать их.
Вот структура этих блоков html.

HTML5

<div id="aboutVideo">
<div id="padlpadR">
<div id="Videotrim">
<img src='allVideo/34797-dark-clouds-above-the-valley-1680x1050-nature-wallpaper.jpg'>
</div>
<div id="viewVid"><img src='images/eye_318-80625.png'><span>158</span><div class="clear"></div></div>
<a href="#">Прикольные вещи о которых вы не знали</a>
</div>
</div>

Пробовал к #Videotrim применить overflow:hidden; и оно срезало но всё равно проблема осталось и блоки поехали также в разные стороны.
Чтобы они не не разъезжались добавил height:135px; и вторая проблема именно это,ведь если указать фикс.высоту то при уменьшение картинки уменьшаются
а блок красный у кого высота 135px остаётся не изменной.И если попробовать удалить эту высоту то блоки разъедутся.
Что вы можете мне посоветовать и как лучше мне сделать?есть ли может быть какие нибудь свойства в css делающие то чтобы картинки в красном блоке были одной высоты.Заранее спасибо за ваши ответы.

CSS

#aboutVideo{
max-width:33.33%;
    background:transparent;
 
    float:left;
    position:relative;
    padding:0 4px 0 4px;
    margin-bottom:5px;
}
#aboutVideo a{
text-decoration:none;
color:blue;
display:block;
padding-left:3px;
}
#aboutVideo #Videotrim > img{
max-width:100%;
}
#aboutVideo p{
padding:0;
}
#viewVid img{
    margin-right:5px;
    border:0px solid#000;
    float:left;
 
}
#viewVid{
 
    padding-left:3px;
}
#aboutVideo span{
display:inline-block;
margin-top:3px;
    border:0px solid#000;
}
#Videotrim{
overflow:hidden;
padding:3px 5px;
height:135px;
background:red;
}
#padlpadR{
background:yellow;  
padding:0 0 5px 0;
border-radius:0 0 5px 5px;
}

Комментарий модератора

Используйте соответствующие теги в редакторе для форматирования кода!

@Fedor92 · 26.12.2017, 13:01

DoctorJ87, самый топорный вариант:

CSS

#aboutVideo #Videotrim > img{
width:100%;
height:100%
}

Но лучше нормально картинки резать ибо из-за стилей css они имеют свойство искажаться...

@Azzar90 · 26.12.2017, 13:24 **[ТС]**

в смысле резать?их в фотошопе рамкой подрезать?или как вы предлагаете?

@Fedor92 · 26.12.2017, 13:33

Сообщение от DoctorJ87

в смысле резать?их в фотошопе рамкой подрезать?или как вы предлагаете?

В фотошопе нарезать картинки одинакового размера и не париться...))

@Azzar90 -3 / -1 / 1 Регистрация: 22.07.2017 Сообщений: 195
	26.12.2017, 13:24 [ТС]	3
	в смысле резать?их в фотошопе рамкой подрезать?или как вы предлагаете? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	26.12.2017, 13:33	4
	Сообщение от DoctorJ87 в смысле резать?их в фотошопе рамкой подрезать?или как вы предлагаете? В фотошопе нарезать картинки одинакового размера и не париться...)) 0