Делаем треугольник CSS на IMG отзывчивым

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

        .image {
            width: 100%;
        }

        .image:after {
            content: '';
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 20px solid #f5f5f5;
            position: absolute;
            left: 45%;
            top: 63%;
            transform: translatex(-50%);
            /** making it horizontally center **/
        }

<div class = "image">
     <img src = "img/frankie.png" class = "img-fluid">
</div>

Это потому, что ничто не ограничивает img размерами .img. Добавьте img { width: 100%; }

— 07.04.2019 12:56

html css image bootstrap-4 css-shapes

07.04.2019 12:53

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

124

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сначала добавьте position:relative к родителю (в вашем случае .image) с начальная позиция

Второе использование bootstrap-4 classes как w-100 для .image/img

Код в скрипке

.image:after {
  content: '';
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #f5f5f5;
  position: absolute;
  left: 45%;
  top: 63%;
  transform: translatex(-50%);
}

  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  
<div class = "image w-100 position-relative">
     <img src = "https://i.stack.imgur.com/vdzwt.jpg" class = "img-fluid  w-100">
</div>

У вас есть идеи, как сделать это отзывчивым? jsfiddle.net/lucasgar/78kobc4q prnt.sc/nbhha7

— 14.04.2019 09:20

07.04.2019 13:17