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

Статус
В этой теме нельзя размещать новые ответы.

GLOOMY

Постоялец
Регистрация
24 Авг 2009
Сообщения
80
Реакции
12
Версия 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
HTML:
               <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

Постоялец
Регистрация
15 Сен 2017
Сообщения
79
Реакции
28
HTML:
<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

Постоялец
Регистрация
24 Авг 2009
Сообщения
80
Реакции
12
Спасибо помогло, а как сделать по аналогии тоже самое, только чтобы тизеры не в столбик шли а горизонтально для relatednews.tpl?

Стандартный код:
HTML:
<li><a href="{link}">{title}</a></li>

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

zALEHANz

Постоялец
Регистрация
26 Апр 2015
Сообщения
98
Реакции
39
Как сделать, чтобы при наведении на картинку ссылка тоже подсвечивалась, а не только когда именно на нее курсор наводишь?
Можно как то так Для просмотра ссылки Войди или Зарегистрируйся
Важно что бы ссылка была в одном родительском элементе с картинкой и располагалась в DOM ниже картинки
 
Статус
В этой теме нельзя размещать новые ответы.
Сверху