Question

我正在使用bootstrap和Advanced Custom Fields插件。我创建了一个图像区域，但图像没有响应。任何人都可以提供帮助并有任何建议如何编辑此代码以使图像在小屏幕上响应。

链接到我的网站：http://vizionstar.co.uk/global_listings/

这是我用来从front-page.php获取图像的代码：

if(get_field('testimonial_content')) {
    echo '<div class="info-box-container">';

    $image = get_field('Image');
          $size = 'full'; 

          if( $image ) {

            echo wp_get_attachment_image( $image, $size ); 
          }

    echo '<h3>' . get_field('testimonial_title') . '</h3>';
    echo '<h1>' . get_field('testimonial_title2') . '</h1>';                
    echo '<h1>' . get_field('testimonial_title3') . '</h1>';
    the_field('testimonial_content');
    echo '</div>'; 
}

图片出现在推荐书栏目“行业对我们说的是什么”。

Answer 1

最简单的方法是将它添加到style.css：

.info-box img {
   max-width: 100%;
   height: auto;
}

Answer 2

尝试将此行添加到CSS文件

img.attachment-full.size-full {
    width: 100%;
    height: 100%;
}

在高级自定义字段插件

2 个答案: