Разное

Картинка ксс: CSS: вписываем изображение в область — Блог

24.09.2020

css — Не работает картинка-ссылка html

Вопрос задан

Изменён 10 месяцев назад

Просмотрен 234 раза

Не работает картинка-ссылка на сайте, хотя написано вроде правильно и даже через инструменты разработчика можно эту ссылку увидеть.

Что странно: Ещё две ссылки-картинки на сайте тоже не работают. Работает только одна в футере. Но с планшета они почему-то работают.

ссылка на сайт: ???? (я ещё не установил нормальный сертификат безопасности, поэтому пишет предупреждение)

<div>
  <p>
    <a href="https://www.youtube.com/c/-/featured" target="_blank">
      <img src="images/-.png" alt="-">
    </a>
    <a href="https://discord.gg/9wMvRc7t5sn" target="_blank">
      <img src="images/discord.
png" alt="-"> </a> <a href="https://www.-.com/members/-/projects" target="_blank"> <img src="images/-.png" alt="-"> </a> </p> </div>
  • html
  • css

1

У блока с классом «sponsors» поменяйте z-index. Вы там нагородили, что другие блоки его перекрывают. Но тогда станут недоступны те ссылки что его перекрывают. Если нет желания сильно все менять, то можно сделать так:

div.sponsors img {
    margin-left: 10px;
    text-align: center;
    z-index: 1;
    position: relative;
}

Это решит проблему с нажатием ссылок и ничего не поломает

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Пропорции для img — dr.

Brain

В этом очень небольшом обзоре мы изучим, как установить соотношение сторон (пропорции) для изображения, размещаемого на HTML-странице. Для чего это нужно? К примеру, полученные знания будут полезны, если возникает необходимость уместить картинки различных размеров и пропорций в квадратный блок (или любой другой блок с четко определенными размерами и соотношением сторон), не искажая изображения.

Следует понимать, что в данном случае мы будем манипулировать CSS-свойствами, ни одно изображении не пострадает и сохранит свое первозданное состояние.

Содержание


Изображение фиксированного размера

Если на страницу нужно вывести картинку заранее определенных размеров, можно воспользоваться атрибутами width и height.

Так как мы не знаем размеры и пропорции исходного изображения, применим CSS-свойство

object-fit. Таким образом, мы сможем быть уверены, что картинка не деформируется.

HTML:

<img src="/path/to/image. jpeg" alt="">

CSS:

img {
    object-fit: cover;
}

Результат можно увидеть на нижеприведенной иллюстрации. Заметьте: исходное изображение имеет большую ширину, но оно не подверглось искажениям, вместо этого оно “обрезано” по центру:

object-fit: cover

Свойство object-fit принимает значения fill, contain, cover

, none, scale-down. Подробно информацию можно изучить на сайте MDN.

Изображение нефиксированного размера

Чтобы привести картинку, изменяющую свои размеры вместе с родительским блоком, к определенным пропорциям нужно воспользоваться оберткой. Оборачивающий элемент заставит изображение сохранять определенные пропорции, так как само изображение заполнит всю его площадь.

HTML:

<div>
    <img src="/media/desk.jpg" alt=""/>
</div>

CSS:

/* Position child elements relative to this element */
.aspect-ratio-box {
    position: relative;
}
/* Create a pseudo element that uses padding-bottom to take up space */
.
aspect-ratio-box::after { display: block; content: ''; /* 16:9 aspect ratio */ padding-bottom: 56.25%; } /* Image is positioned absolutely relative to the parent element */ .aspect-ratio-box img { /* Image should match parent box size */ position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

Приблизительно так будет выглядеть результат при соотношении сторон 16:9:

16:9

Свойство padding-bottom определяет высоту родительского контейнера, выраженную в процентах от его ширины. Например, при ширине блока 400px результирующая высота составит 56,25% от 400px, то есть около 225px.

Для того, чтобы определить нужное нам значение

padding-bottom необходимо разделить высоту на ширину.

Например, при соотношении сторон 16:9, арифмитические манипуляции будут выглядеть так:

9 / 16 = 0.5625

Выразим результ в процентах (умножим полученное число на 100):

0.5625 * 100 = 56. 25

Результат: 56.25%

Вот и все.

Заключение

Мы научились выводить на HTML-изображение в различных пропорциях без деформации исходной картинки. Предложенные варианты работы с изображениями фиксированных и нефиксированных охватывают значительную часть стандартных ситуаций, возникающих при верстке.

Полезно прочитать

  1. Как управлять размерами изображения с помощью CSS?
  2. CSS. Магия отступов

76 Free Kiss CC0 Стоковые Фото

Просмотрите красивые изображения Free Kiss с высоким разрешением. Эти бесплатные фотографии имеют лицензию CC0, поэтому вы можете использовать их как в личных, так и в коммерческих проектах без указания авторства.

Премиум-предложение

Получите 10 бесплатных изображений от