Обрезка картинок через CSS

[GLOOMY]

Версия DataLife Engine: 10.1

Задача:
Нужно что бы в меню "Популярные новости", выводились квадратные картинки размером 150x150px.

Источник:
Инструкция как все сделать: Для просмотра ссылки Войди или Зарегистрируйся.

Что имеется сейчас:
style.css

/*---Вывод популярных новостей с изображением---*/
.topnews_img {
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
}
.topnews_img img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.topnews_img img.portrait {
  width: 100%;
  height: auto;
}

topnews.tpl

               <center>
               <div class="topnews_img">
                        <a href="{link}"><img src="{image-1}" class="portrait"/></a>
               </div>
               <a href="{link}">{title}</a><br /><br />
               </center>

Результат:
Если применить class="portrait", то вертикальные картинки обрезаются и становятся квадратными, а горизонтальные просто уменьшаются, но квадратными не становятся. Если убрать class="portrait", то все наоборот. Горизонтальные становятся квадратными, а вертикальные просто уменьшаются, но не становятся квадратными.

Вопрос:
Что нужно прописать, чтобы все работало и для горизонтальных картинок и для вертикальных одновременно?
Так же рассмотрю любой другой проверенный рабочий вариант.

Заранее всем спасибо за помощь!

 

[Get-Web]

<center>
<a href="{link}" class="topnews_img" style="background-image: url({image-1});"></a>
<a href="{link}">{title}</a><br /><br />
</center>

/*---Вывод популярных новостей с изображением---*/
.topnews_img {
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: block;
  text-decoration: none;
}

 

[GLOOMY]

Спасибо помогло, а как сделать по аналогии тоже самое, только чтобы тизеры не в столбик шли а горизонтально для relatednews.tpl?

Стандартный код:

<li><a href="{link}">{title}</a></li>

И еще заодно вопрос сразу. Как сделать, чтобы при наведении на картинку ссылка тоже подсвечивалась, а не только когда именно на нее курсор наводишь?

 

[zALEHANz]

Как сделать, чтобы при наведении на картинку ссылка тоже подсвечивалась, а не только когда именно на нее курсор наводишь?

Можно как то так Для просмотра ссылки Войди или Зарегистрируйся
Важно что бы ссылка была в одном родительском элементе с картинкой и располагалась в DOM ниже картинки