Как растянуть картинку на ширину блока указанным свойством padding?

Question

[Алексей Королёв]

Задумка растянуть картинки в теле на ширину блока. Учитывая особенности CMS изменять параметры можно только через img.
Попробовал так, но картинка просто липнет к левой стороне и всё.

.img-fix img {display:block;width:100%;height:auto;margin:0px -64px !important;}

Родительский контейнер имеет card card-body и p-3. Как быть?

Answer 1

[Pavel-ww]

Ссылка на страницу помогла бы вам больше. А так приходится гадать.
Добавьте к тому что у вас есть height: 100%; , возможно какой-то min-height потребуется, object-fit: cover;
Хотя не уверен что это сработает. Неужели у CMS нет возможности добавлять свой CSS? Тут надо над родителем работать

Comments

[Алексей Королёв]

Сайт на локалке пока. Вот код всего блока.

<div class=" px-5 card  block mb-5">
        <div class="card-body">
			<nav class="nav w-100" style="margin-left:-15px;">
         <a class="nav-link text-dark fw-bold" href="{category-url}"><img src="{category-icon}" class="rounded-circle me-2 mb-1" width="25" height="25">{category}</a>
         <a class="nav-link text-dark" href="#">{login}</a>
         <a class="nav-link text-dark" href="#">{date=F, d}</a>
         <div class="position-absolute end-0 pe-5 pt-2"  >
            [edit]          
            <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <circle cx="12" cy="12" r="1"></circle>
               <circle cx="19" cy="12" r="1"></circle>
               <circle cx="5" cy="12" r="1"></circle>
            </svg>
            [/edit]               
         </div>
      </nav>
            <h2 class="title" >{title}</h2>
            <style>
                .img-fix img {display:block !important;width:100% !important;height:100% !important;object-fit: cover !important;margin:0px -64px !important;}
                </style>
		<div class="img-fix " >
			{full-story}
		{tags}
            <div class=" ">{views} [declination={views}]просмотр|а|ов[/declination]</div>
		</div>
		 <nav class="nav mb-2 mt-3" style="margin-left:-15px;">
      <div class="td-none">
         [rating-type-2]   [rating-plus]           
         <div class="nav-link text-dark " class="like" >
            <svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
            </svg>
            <span class="align-bottom ms-2">{likes}</span>
         </div>
         [/rating-plus][/rating-type-2]  
      </div>
      <div class="td-none">
         [com-link] 
         <div class="nav-link text-dark " >
            <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-message-circle">
               <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
            </svg>
            <span class="align-bottom ms-2">Обсудить</span>
         </div>
         [/com-link]  
      </div>
      [add-favorites]  
      <div class="nav-link text-dark"  >
         <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
         </svg>
      </div>
      [/add-favorites] 
      [del-favorites] 
      <div class="nav-link text-dark" >
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#e03232" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
         </svg>
      </div>
      [/del-favorites]

                   
        
      <div class="position-absolute end-0 pe-3 pt-2"  >
          <script src="https://yastatic.net/share2/share.js"></script>
<div class="ya-share2" data-curtain data-shape="round" data-limit="0" data-more-button-type="short" data-services="vkontakte,facebook,odnoklassniki,telegram,twitter,viber">  
      </div>

      </div>
   </nav>
	
	

	
</div>
</div>

[Pavel-ww]

Алексей Королёв, и что вы предлагаете, дописать css к этому и почистить код от инклюдов? )).

Залейте на тестовый домен

[Алексей Королёв]

Pavel-ww, https://postimedia.net/o-skripte/4-belarus-postavi...

[Pavel-ww]

Алексей Королёв, ну, конкретно в этом частном случае так (не меняя того что уже есть для img)

.img-fix p:nth-child(3) {
	margin: 0 -64px;
}

Я так понимаю, вы вставляете изображение через WYSIWYG редактор. Переключитесь в режим кода и добавьте тегу P в котором изображение, какой-то класс. Или это бывает в опциях самого редактора. Адаптируйте код под этот класс и используйте его везде. Я понимаю, что вы можете забыть это, или контент менеджер будет тупить. Но другого варианта нет.

Вернее есть - можно переопределить весь лайоут, сделать его на всю ширину и добавить отступы для всех детей кроме img. Тогда придется следить чтобы img не попадал в P. Но это тот еще костыль

[Алексей Королёв]

Pavel-ww, да это решение помогло, правда учитывая особенность бутстрап пришлось обернуть @ media, чтобы на малых экранах картинка не вылазила.

[Pavel-ww]

Алексей Королёв, ну да, корректировки в точках остановки безусловно требуются