Конфликт текста с клипом изображения

Я застрял с этой частью. Мое изображение clip-path, но мое class:txt width не растягивается из-за img. Извините, если я не могу объяснить это хорошо. Английский - мой третий язык, поэтому я надеюсь, что вы понимаете изображение, которое я прикрепляю.

Результат

Фактическое изображение

Конфликт текста с клипом изображения

    .item1{
	background: url(../img/bg.png);
	background-size: 100%;
	background-repeat: repeat-y;
	padding-left: 40px;
}

.item1 img{
	float: right;
	-webkit-clip-path: inset(5% 10% 15% 46%);
	clip-path: inset(5% 10% 15% 46%);
	margin-right: -15px;
    margin-top: 20px;
}

.item .txt p{
	text-align: justify;
}

.item .txt h2{
	margin-top: 5px;
	padding-top: 65px;
}

<div class = "item1">
	<img src = "https://i.stack.imgur.com/YasK2.png">
	<div class = "txt">
		<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	</div>
</div>

В чем проблема? Вы не хотите, чтобы текст останавливался на краю изображения?

— 13.03.2019 08:37

@tshimkus Да. Я хочу, чтобы это пошло дальше.

— 13.03.2019 08:38

html css image

13.03.2019 08:26

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 4

это то, как вы этого хотите ?? .. использовали flex box для размещения изображения рядом с текстом и использовали

.item1 img{
 object-fit:cover;
 object-position:center;
}

вместо clip-path

https://codepen.io/Xenio/pen/rRYPoR

.item1{
    background: url(../img/bg.png);
    background-size: 100%;
    background-repeat: repeat-y;
    padding-left: 40px;
    display: flex;
}

.item1 img{
 object-fit:cover;
 object-position:center;
}

.item .txt p{
    text-align: justify;
}

.item .txt h2{
    margin-top: 5px;
    padding-top: 65px;
}

<div class = "item1">
    
    <div class = "txt">
        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <img src = "https://images.unsplash.com/photo-1548659979-53d6a343b767?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
</div>

13.03.2019 08:51

Вместо clip-path. Я предлагаю вам использовать свойства width, height & object-fit. Что не создает проблемы с макетом.

.item1 img{
    float: right;
    width: 20%; 
    height: 200px;
    object-fit:cover;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 20px;
}

https://codepen.io/moorthy-g/pen/NJwomY

13.03.2019 08:52

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

Попробуй это

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<style>
  .item1 {
      background: url(../img/bg.png);
      background-size: 100%;
      background-repeat: repeat-y;
      padding-left: 40px;
      position: relative;
  }

  .item1 img {
      -webkit-clip-path: inset(5% 10% 15% 46%);
      clip-path: inset(5% 10% 15% 46%);
      margin-right: -15px;
      position: absolute;
      right: 0;
      top: 0;
  }

  .txt {
      padding-right: 280px;
  }

  .item .txt p{
      text-align: justify;
  }

  .item .txt h2{
      margin-top: 5px;
      padding-top: 65px;
  }
</style>
</head>
<body>
  <div class = "item1">
      <img src = "https://i.stack.imgur.com/YasK2.png">
      <div class = "txt">
          <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
  </div>
</body>
</html>

13.03.2019 09:03

Итак, возможно, что-то вроде этого, если вы хотите, чтобы изображение было обрезано: Установите <div class = "item1"> на position: relative и <div class = "txt"> на position: absolute, затем рассчитайте ширину <div class = "txt"> на основе ширины изображения. (И на всякий случай, может быть, установите z-index: 1 или выше для вашего текстового блока, чтобы он никогда не отображался «за» изображением?)

.item1 {
    background: url(../img/bg.png);
    background-size: 100%;
    background-repeat: repeat-y;
    padding-left: 40px;
    position: relative;
}

.item1 img {
    float: right; 
    -webkit-clip-path: inset(5% 10% 15% 46%);
    clip-path: inset(5% 10% 15% 46%);
    margin-right: -15px;
    margin-top: 20px;
}

.txt {
    width: calc(100% - 300px);
    margin-top: 20px;
    position: absolute;
    left: 0;
    z-index: 1;
}

.item .txt p {
    text-align: justify;
}

.item .txt h2 {
    margin-top: 5px;
    padding-top: 65px;
}

Вот ссылка на jsfiddle

13.03.2019 09:22