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

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

enter image description here

.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>
0
Khufu 1 Май 2020 в 01:14

2 ответа

Во-первых, вы хотите добавить размер изображения... Делайте это в своих функциях. 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()
     ) );
?>
0
Howard E 1 Май 2020 в 10:00

Я думаю, вы должны исправить это, и, возможно, для размера изображения вы можете попробовать что-то вроде этого в 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>
0
Erwin_San 1 Май 2020 в 06:52