html - CSS Scale 与填充冲突

Question

我有一个div包裹拇指img。img我在悬停时应用了一种效果来缩放和旋转div. 问题是 div 有一个带有 padding-left 和 padding-right 的引导类，当图像缩放时，它会删除填充，从而增加图像的宽度。我怎样才能保留填充物？您可以在以下页面中间看到示例：https ://lagaleramagazine.es

项目 1 的示例：

     .pt-cv-1-col img {
          -moz-transition: all 0.7s;
          -webkit-transition: all 0.7s;
          transition: all 0.7s; 
    }
        
        
     .pt-cv-1-col:hover img {
          -moz-transform: rotate(10deg) scale(1.3);
          -webkit-transform: rotate(10deg) scale(1.3);
          transform: rotate(10deg) scale(1.3);
    }

    <div id="event-56092" class="ect-list-post ect-featured-event  data-parent-post-id=" 56053""="">
    	<div class="ect-list-post-left ">
    		<div class="ect-list-img" style="background-image:url('https://www.lagaleramagazine.es/wp-content/uploads/2019/01/50008823_1936412149789348_6701274349090897920_n-1024x715.jpg');background-size:cover;background-position:center center;">
    			<a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="Imagen del evento" alt="Magazine 1" rel="bookmark">
    				<div class="ect-list-date">
    					<div class="ect-date-area default-schedule">
    						<span class="ev-day">25</span>
    						<span class="ev-mo">febrero</span>
    						<span class="ev-yr">2019</span>
    					</div>
    				</div>
    			</a>
    		</div>
    	</div>
    	<div class="ect-list-post-right">
    		<div class="ect-list-post-right-table">
    			<div class="ect-list-description">
    				<h2 class="ect-list-title">
    					<a class="ect-event-url" href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" title="VI Escuelas Deportivas para Mayores" rel="bookmark">VI Escuelas Deportivas para Mayores</a>
    				</h2>
    				<button class="btn1 button-more svg">Más detalles</button>
    				<div class="p1" style="display: none;">
    					<div class="ect-event-content">
    						<p>Desde el lunes 21 de enero y hasta el martes 18 de junio, todos los socios de los Centros Municipales de Mayores que participan en la XXIII Campaña de Atención al Mayor, podrán inscribirse en las diferentes actividades de la VI Escuelas Deportivas para mayores. Se impartirán clases de pádel, tenis de mesa, petanca, rutas...</p>
    						<a href="https://www.lagaleramagazine.es/agenda/vi-escuelas-deportivas-para-mayores/2019-02-25/" class="ect-events-read-more" rel="bookmark">Ir al evento »</a>
    					</div>
    				</div>
    			</div>
    			<div class="p1-venue">
    				<div class="ect-list-venue  default-venue">
    					<span class="ect-icon">
    						<i class="fa fa-map-marker" aria-hidden="true"></i>
    					</span>
    					<span class="ect-venue-details ect-address">
    						<a href="https://www.lagaleramagazine.es/lugar/area-de-atencion-al-mayor-ayuntamiento-de-badajoz/" title="Area de atención al Mayor , Ayuntamiento de Badajoz">Area de atención al Mayor , Ayuntamiento de Badajoz</a>,
    						<span class="tribe-address">
    							<span class="tribe-locality">Badajoz</span>
    							<span class="tribe-delimiter">,</span>
    							<abbr class="tribe-region tribe-events-abbr" title="Badajoz">Badajoz</abbr>
    							<span class="tribe-country-name">España</span>
    						</span>
    					</span>
    					<span class="ect-google">
    						<a class="tribe-events-gmap" href="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Badajoz+Badajoz+Espa%C3%B1a" title="Click para ver mapa de Google" target="_blank">+ Google Map</a>
    					</span>
    					<div class="ect-rate-area">
    						<span class="ect-rate-icon">
    							<i class="fa fa-money" aria-hidden="true"></i>
    						</span>
    						<span class="ect-rate">Gratuito</span>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

标签： htmlcss