Гуру CSS помогите обрезать картинку

Неа (((

Появляется непонятный отступ снизу и картинка все равно не помещается.

.crp_related {

	clear: both;

	margin: 10px 0;

}

.crp_related h3 {

	margin: 0 !important;

}

.crp_related ul {

	list-style: none;

	float: left;

	margin: 0 !important;

	padding: 0 !important;

}

.crp_related li, .crp_related a {

	float: left;

	overflow: hidden;

	position: relative;

	text-align: center;

}

.crp_related li {

	margin: 5px !important;

	border: 1px solid #ddd;

	padding: 6px;

	width: 180px;

	height: 125px;

}



.crp_related li:hover {

	background: #eee;

	border-color: #bbb;

}

.crp_related a {

    box-shadow: none !important;

    text-decoration: none !important;

    height: 100px;

}

.crp_related a:hover {

	text-decoration: none;

}

.crp_related .crp_title {

	color: #fff !important;

	position: absolute;

	bottom: 0;

	padding: 3px;

	color: #fff;

	font-size: .9em;

	text-shadow: 1000 .1em .1em .2em;

	background: rgb(0.5, 0.5, 0.5);

	background: rgba(0, 0, 0, 0.5);

	-webkit-border-radius: 7px;

	-moz-border-radius: 7px;

	border-radius: 7px;

}

.crp_related li:hover .crp_title {

	background: rgb(0.2, 0.2, 0.2);

	background: rgba(0, 0, 0, 0.8);

}

.crp_related li {

	vertical-align: bottom;

	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);

	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);

	box-shadow: 0 1px 2px rgba(0,0,0,.4);

	-webkit-border-radius: 7px;

	-moz-border-radius: 7px;

	border-radius: 7px;

}

.crp_clear {

	clear: both;

}

.crp_title:visited {

	color: #fff !important;

}

Как только не пытался впихнуть этот триклятый object-fit: cover; - не хочет работать :(

Вы сами просили обрезать картинку - см. название темы.

Sitealert, да, но не так координально же ))) Тем более, что при таком "обрезании" не умещается полностью заголовок поста. Если обратите внимание, в предыдущих скринах он занимал 2 строчки, а в нынешнем одну.

Дублирую, то, что мне необходимо было:

Я боюсь, у нас сейчас получится компот из стилей, в результате чего всё окончательно запутается.

Хоть какая-то система с размерами и ориентацией картинок есть? Подогнать картинки по высоте, чтобы у вертикальных картинок были боковые поля?

Sitealert, есть такое. Поэтому я и выклыдаваю промежуточные этапу, чтобы потом можно было понять хронологию событий, с чего начинали и что получили. По большому счету, сейчас осталось прикрутить object-fit: cover; и понять, почему заголовок не переносится. Это увы выше моих способностей 🤣

Не, надо заполнить всю область, кок вот тут на примере с фоткой белок

Это пока не кроссбраузерно. Прошу прощения, на сегодня у меня работоспособность закончилась.:o

вроде без js не получится ваша задача... нужно вычислять, что больше ширина или высота, и меньшей стороне присваивать или ширину 100% или высоту 100%

проще было ссылку на страницу дать, чем тут заниматься догадками

Ничего страшного ;) Большое спасибо за помощь в решении проблемы.

Очень надеюсь, что без скриптов получиться все реализовать :o

Не особо хотел палить пациента, ну если так проще, то проверяю на этом посте.

Сейчас включены настройки размеров в админке

Ну вот через javascript я что-то накидал. Только тогда надо хотя бы для ul присвоить id (у меня сделано ul id='ul1'

<style>

.crp_related {

	clear: both;

	margin: 10px 0;

}

.crp_related h3 {

	margin: 0 !important;

}

.crp_related ul {

	list-style: none;

	float: left;

	margin: 0 !important;

	padding: 0 !important;

}

.crp_related li, .crp_related a {

	float: left;

	overflow: hidden;

	position: relative;

	text-align: center;

}

.crp_related li {

	margin: 5px !important;

	border: 1px solid #ddd;

	padding: 6px;

}

.crp_related li:hover {

	background: #eee;

	border-color: #bbb;

}

.crp_related a {

    box-shadow: none !important;

    text-decoration: none !important;

    height: 125px;

    width: 180px;

}

.crp_related a:hover {

	text-decoration: none;

}

.crp_related img {

	position: absolute;

        top: 0;

        left: 0;

}

.crp_related .crp_title {

	color: #fff !important;

	position: absolute;

	bottom: 0;

	left: 0;

	padding: 3px;

	color: #fff;

	font-size: .9em;

	text-shadow: 1000 .1em .1em .2em;

	background: rgb(0.5, 0.5, 0.5);

	background: rgba(0, 0, 0, 0.5);

	-webkit-border-radius: 7px;

	-moz-border-radius: 7px;

	border-radius: 7px;

}

.crp_related li:hover .crp_title {

	background: rgb(0.2, 0.2, 0.2);

	background: rgba(0, 0, 0, 0.8);

}

.crp_related li {

	vertical-align: bottom;

	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);

	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);

	box-shadow: 0 1px 2px rgba(0,0,0,.4);

	-webkit-border-radius: 7px;

	-moz-border-radius: 7px;

	border-radius: 7px;

}

.crp_clear {

	clear: both;

}

.crp_title:visited {

	color: #fff !important;

}

</style>





<div class="crp_related ">

<h4>Похожие записи:</h4>

<ul id='ul1'>

<li><a href="http://www.site.ru/post-1/" rel="nofollow" target="_blank"><img src="http://www.site.ru/img/1.jpg" alt="Заголовок 1" title="Заголовок 1"class="crp_thumb crp_correctfirst" id='img1'><div class="crp_title">Заголовок 1</div></a></li>

<li><a href="http://www.site.ru/post-2/" rel="nofollow" target="_blank"><img src="http://www.site.ru/img/2.jpg" alt="Заголовок 2" title="Заголовок 2"class="crp_thumb crp_correctfirst"><div class="crp_title">Заголовок 2</div></a></li>

<li><a href="http://www.site.ru/post-3/" rel="nofollow" target="_blank"><img src="http://www.site.ru/img/3.jpg" alt="Заголовок 3" title="Заголовок 3"class="crp_thumb crp_correctfirst"><div class="crp_title">Заголовок 3</div></a></li>

</ul>

<div class="crp_clear"></div>

</div>



<script>

var ul1=document.getElementById('ul1');

var l=ul1.children.length;

  for(var i=0; i<l; i++){

    var a,r,w,h,wmax,hmax;

    a=ul1.children.firstChild;

    r=1.44;

    wmax=180;

    hmax=125;

    w=a.firstChild.width;

    h=a.firstChild.height;

    if(w/h<r){

      a.firstChild.width=wmax;

      a.firstChild.style.top=hmax/2-a.firstChild.height/2+'px';

      a.firstChild.style.offsetTop=a.firstChild.style.top;

      a.firstChild.style.offsetLeft=0;}

    else{

      a.firstChild.height=hmax;

      a.firstChild.style.left=wmax/2-a.firstChild.width/2+'px';

    }

}

</script>