嵌入到 Bootstrap 卡片容器中的 WordPress 特色图像答案

【问题标题】：WordPress featured image embedded into a Bootstrap card container嵌入到 Bootstrap 卡片容器中的 WordPress 特色图像
【发布时间】：2019-04-12 13:06:12
【问题描述】：

我正在使用 WordPress、Jetpack Photon 和 Bootstrap 4。这是我的图像标签，它可以工作，但不是很好的做法......

 <?php echo '<img class="card-img img-fluid" src=' . the_post_thumbnail(array(375,300)) . '>'; ?>

我正在尝试使用 the_post_thumbnail() 请求特色图片。我无法让 Photon 提供适合我的 Bootstrap 卡片容器宽度的缩放图像。提供的图像要么有点太薄，要么超出了我的卡片宽度。如何让 Photon 图像完美/响应地适合（宽度方向）？

the_post_thumbnail('medium').... 导致卡片容器的图像太小。

the_post_thumbnail('large').... 导致图像太大，溢出它的卡片容器。

使用 Bootstrap 的 max-width: 100% 似乎并不能解决这个问题。

【问题讨论】：

标签： wordpress bootstrap-4

【解决方案1】：

代替图片标签，试试：

<?php the_post_thumbnail( 'full', array( 'class'=>'card-img img-fluid' ) ); ?>

上述函数实际生成<img class="card-img img-fluid" src="http://img-src">

【讨论】：

上面的代码似乎在我的 Bootstrap 卡片容器中放置了特色图片（100% 宽度）。
没有任何 src 或视觉示例就无法帮助。

【解决方案2】：

将以下代码添加到您的 functions.php 文件以定义新的图像大小。

add_image_size( 'name-of-size', 375, 300, true );

了解更多关于添加图片尺寸click here。

**在上面的代码行中，name-of-size 可以是任何唯一的名称来表示特定的图像大小。这个概念是当您将任何图像上传到 WordPress 媒体时，它将裁剪为定义并存储在 wp-uploads 文件夹中的所有图像大小。

***另外请注意，如果您需要新尺寸的图片，您需要为之前上传的图片重新生成缩略图。

将以下代码添加到您的文件中以显示图像

<?php the_post_thumbnail( 'name-of-size', array( 'class'=>'card-img img-fluid' ) ); ?>

希望对你有帮助，谢谢

【讨论】：

我不想重新生成缩略图，因为我希望 Bootstrap 卡片图像能够反映卡片的宽度和设备视图端口。 Photon 似乎提供了我的特色图像的优化版本，并且“img-fluid”属性似乎将图像完全填满了卡片的宽度。这是 Photon 图像 URL：src=“......Coquihalla_Summit_2076-2.jpg?fit=300%2C225&ssl=1”。我说的对吗？
亲爱的 Gordon 那么你必须用 css 来做。不明白网址。您需要 the_post_thumbnail 函数以外的自定义代码..？在自定义代码中，我们将在数组中获取特定的 url og 图像及其属性。然后我们可以根据需要编写图像标签。这是你的要求吗？
Manu.... 我真的很想将 the_post_thumbnail 函数与 Jetpack Photon 结合使用，让 Photon 为我的 Bootstrap 卡宽度提供正确的图像尺寸。艾哈迈德的建议似乎促成了这件事。