Adjust image size and info window size in carto db

Question

I am trying to adjust images into carto db infowinwdow. Same image size (adjusted to info window ) should be showed regardless of image size or orientation.

I have been trying different possibilities (pop-up-header, pop-up-content,..wrapper) and actions ('width:auto', 'width: auto; display: inline-block;'..etc) but I can´t get that I need.

I have thought in resize the images before and lock the info window size but It will only work with images oriented on the same direction.....

Is it possible to do that I need?

Answer 1

It is possible to change the size of the infowindow and the elements within through CSS.

For example, to change the width of the infowindow, you can use the style=" min-width: 320px;

Here you can see an example that changes the width of the infowindow and the height of the element that contains an image.

<div class="cartodb-popup header with-image v2" data-cover="true" style=" min-width: 320px;" > <a href="#close" class="cartodb-popup-close-button close" >x</a> <div class="cartodb-popup-header" style="min-height:200px;"> <div class="cover" style="min-height:300px; "> <div id="spinner"></div> <div class="image_not_found"> <i></i> <a href="#/map" class="help">Non-valid picture URL</a></div> <span class="separator" ></span> <div class="shadow"></div> <img src="{{image_column}}" /> </div> </div> <div class="cartodb-popup-content-wrapper" > <div class="cartodb-popup-content" > </div> </div> <div class="cartodb-popup-tip-container" ></div> </div>