I wrote the code so that the height of the image was the size of a block for text, but something about the image height is less.

function carouselService(){ $('.carousel-service-item').each( function(){ var ths = $(this), thsh = ths.find('.carousel-service-content').outerHeight(); $(this).find('.carousel-service-image').css('min-height', thsh); }); }carouselService(); <div class="owl-carousel carousel-service"> <div class="carousel-service-item"> <div class="carousel-service-content"> <h5>Brand Developme</h5> <P>Lorem ipsum dolor sit amet, consectetur adipisicing 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</P> </div> <!-- /carousel-service-content --> <div class="carousel-service-image"> </div> <!-- /carousel-service-image --> </div> <!-- /carousel-service-item --> </div>

enter image description here

Help me fix please

  • one
    Attach a minimal reproducible example - Cheg
  • I attached the picture, what else is needed? it's not animation - pavel
  • from the picture you can see that the size of the picture is less than the size of the block for text - pavel
  • $ ("element"). innerHeight (); just the same - user33274
  • @pavel but nothing is visible on your piece of code. If you are lazy to provide a reproducible example, why should someone not be lazy and solve the problem, not knowing what to solve? - Cheg

1 answer 1

 $('.carousel-service-item').each( function(){ // получаем высоту контента включая padding var contentH = $(this).find('.carousel-service-content').innerHeight(); // устанавливаем фиксированную высоту контейнеру с картинкой $(this).find('.carousel-service-image').css('height', contentH); });

I note that the height is given to the container ... apparently the "img" tag is then generated? Perhaps you will need to register css styles for beautifully displaying a picture, for example:

 { width: 100%; height:100%, object-fit: cover; }