Question

我一直在使用以下代码在Bootstrap轮播中显示图像：

<a href="<?php echo get_page_link( $page->ID ); ?>"> 
    <?php $image = wp_get_attachment_image( get_post_thumbnail_id($page->ID), 'child-page','', array('class' => "img-responsive img-shadow", 'alt' => get_the_title()))  ?>
    <?php echo $image; ?> 
</a>

我在functions.php中添加了add_image_size( 'child-page', 400, 200, true );，但它显示的是可变高度的图像。

如何在不优化图像的情况下控制尺寸？

Answer 1

我添加了以下css

.gallery-slider .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
display: block;
max-width: 100%;
height: 170px !important;
}

解决问题

Answer 2

为什么不放入style.css

.carousel-inner img{
  width: 400px;
  height: 200px;
}

Answer 3

当然，你可以强制你的图像适合@rockStar使用CSS提出的特定宽度和高度，但这会导致难看的不成比例的图像。有一些插件可以让您 - 毫不费力地 - 以您需要的维度重新生成WordPress缩略图：

干杯。

如何在bootstrap轮播中显示相同大小的图像

3 个答案: