Как обрезать высоту изображения при превышении высоты, без использования px, чтобы разрешить отзывчивость

Question

Я использую php l oop для извлечения статей из Wordpress, и поскольку изображения меняются по высоте, я добавлю sh, чтобы добавить css, который гарантирует, что высота изображения всегда остается неизменной, без искажение фотографии.

Должен ли я просто зафиксировать высоту в let, скажем, 200px, используя подгонку объекта, а затем использовать max-width, чтобы сделать его отзывчивым, или есть лучший способ сделать это?

.fonds-thumbnail-header {
    display: block;
    margin: auto;
    width: 100%;
}

<div class="fonds-thumbnail-header">
<?php if ( has_post_thumbnail() ) { ?>
    <a href="<?php the_permalink(); ?>" class="fonds-thumbnail-header">
        <?php the_post_thumbnail( 'medium', array(
            'class' => 'fonds-thumbnail-header',
            'alt'	=> get_the_title()
            ) );
        ?>
    </a>
</div>

Answer 1

Во-первых, вы хотите добавить размер изображения ... Сделайте это в своих функциях. php вашей темы.

function dd_custom_image_sizes(){
    // 300 x 200 cropped center
    add_image_size( 'my_custom_thumb', 300, 200, array('center', 'center'));
}
add_action('after_setup_theme', 'dd_custom_image_sizes');

Поскольку вы добавляете новое изображение размер, после того, как ваш сайт уже настроен, вам придется восстановить миниатюры, чтобы применить новый размер. Этот плагин Regenerate Thumbnails это то, что вы должны использовать.

После того, как вы запустите плагин и получите новые большие пальцы ...

Затем в вашем шаблоне назовите этот размер:

<?php the_post_thumbnail( 'my_custom_thumb', array(
     'class' => 'fonds-thumbnail-header',
     'alt'  => get_the_title()
     ) );
?>

Answer 2

Я думаю, вы должны исправить это, и, возможно, для размера изображения вы можете попробовать что-то вроде этого в if (has_post_thumbnail ())

<div class="crop" style="
    background-image: url('test300x450.png');   
    width: 300px;   
    height: 300px; 
    background-position: center center; 
    background-repeat: no-repeat;"> 
</div>