Нужно отцентрировать картинку в превью к новости

@256_TeraBite · Регистрация: 14.10.2012

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

В каждой новости у меня есть картинка. В превью она её есть с помощью этого.

HTML5
1
2
3
4
<a href="{full-link}">
    <div class="prev_news">
    <img src="{image-1}" alt="{title}">
<div/><a/>

Но всё бы было хорошо, но берёт она её не полностью и только левый верхний угол. Выглядит это отвратительно. Как сделать так, что бы бралась та же картинка, но из центра.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.prev_news{
    position: relative;
    width: 192px;
    height: 150px;
    overflow: hidden;
}
 
.prev_news:after{
    position: absolute;
    display: block;
    background: url(../images/lightover_sp.png) no-repeat;
    background-position: 0 0;
    width: 192px;
    height: 150px;
    top: 0;
    left: 0;
    content: '';
}
 
.prev_news > img{
    min-width: 192px;
    height: 150px;
}

@maxvel0007 · 04.09.2015, 13:38

По мне так лучше картинки готовить, а не скрипты под мульти размерные картинки писать.

@256_TeraBite · 04.09.2015, 15:28 **[ТС]**

Меня фото устраивают. Просто если вместо лица на превью попадает только верхняя правая часть лица, это ужасно выглядит. Я почти уверен, что есть команда "центровки". Просто я её не могу найти!

@Taatshi · 05.09.2015, 10:40

не проще сделать это с помощью css?

@256_TeraBite · 08.09.2015, 11:41 **[ТС]**

я приложил CSS. подскажи, друг)

@Taatshi · 08.09.2015, 22:31

не пойдет. Ссылку на сайт дайте.

@256_TeraBite · 14.09.2015, 12:03 **[ТС]**

Вот сайт
5 картинок которые находятся под шапкой.

@Taatshi · 15.09.2015, 22:31

Пропишите в css

CSS
1
2
3
4
.prev_pop_article > img {
  width: 100%;
  height: auto;
}

Соотношение сторон у всех картинок сделайте одинаковым. Иначе будет пустое место.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@maxvel0007 грОмотей 239 / 175 / 17 Регистрация: 01.04.2011 Сообщений: 1,435
	04.09.2015, 13:38
	По мне так лучше картинки готовить, а не скрипты под мульти размерные картинки писать. 0

@256_TeraBite 11 / 11 / 0 Регистрация: 14.10.2012 Сообщений: 40
	04.09.2015, 15:28 [ТС]
	Меня фото устраивают. Просто если вместо лица на превью попадает только верхняя правая часть лица, это ужасно выглядит. Я почти уверен, что есть команда "центровки". Просто я её не могу найти! 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	05.09.2015, 10:40
	не проще сделать это с помощью css? 0

@256_TeraBite 11 / 11 / 0 Регистрация: 14.10.2012 Сообщений: 40
	08.09.2015, 11:41 [ТС]
	я приложил CSS. подскажи, друг) 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	08.09.2015, 22:31
	не пойдет. Ссылку на сайт дайте. 0

@256_TeraBite 11 / 11 / 0 Регистрация: 14.10.2012 Сообщений: 40
	14.09.2015, 12:03 [ТС]
	Вот сайт 5 картинок которые находятся под шапкой. 0