使图像响应高级自定义字段插件

Question

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

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

这是我用来从前面获取图像的代码-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>'; 
}

图片在推荐部分"WHAT THE INDUSTRY SAYS ABOUT US"。

Answer 1

尝试将此行添加到您的 CSS 文件

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

Answer 2

最简单的方法是将其添加到您的 style.css:

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

使图像响应高级自定义字段插件

Make image responsive on Advanced Custom Fields plugin

php

wordpress

twitter-bootstrap

advanced-custom-fields