如何通过 HTML/CSS 使图片在 wordpress 自定义帖子类型上具有响应性

Question

我是一名新手，工作深入，包括 Wordpress 和自定义类型帖子类型。我已将我的图像正确放置到 wordpress 中，并已成功将照片应用到“关于页面”上。就桌面模式而言，它工作得很好，但是当我响应并将其带到平板电脑/移动设备时，图片状态为静止，并且在转换为平板电脑/移动设备界面时没有响应。我一直在摆弄边距，将我的样式语法应用到不同的媒体查询中，但是一旦将响应式页面带到平板电脑或移动设备上，似乎没有任何结果。这是我目前拥有的 HTML 代码和 CSS 代码。

HTML

<?php 
/*
Template Name: About
*/
?>
<?php get_header(); ?>

<div class="about" style="">
    <h1>Why?</h1>
</div>

<div class="about">
    Many may ask the question "Why". Questions such as; "Why is this website relevant?", "Why do I need to know this?" or "Why does this topic even matter?"
    Many of those questions can be anwsered in different ways, with different attitudes and opinions, yet the only importance this website offers is Knowledge.
    The access of clear and ordered catagories of famous people from the actors all the way up to our goverment officials whom represent us, the United States citizens, the opportunity for individuals that may have this disability to understand that it does not make you less from anyone else, and that it simply gives you the power to express who you are and reach milestones in your lifetime that many "ordinary" people don't.
</div>

<div class="about" style="">
    <h1>General Statistics</h1>
</div>

<div class="about">
    <img src="<?php the_field('data_graphic');?>"/>
</div>  

<main role="main" class="col-md-3">
<!-- section -->
    <section>
        <?php if (have_posts()): while (have_posts()) : the_post(); ?>
            <!-- article -->
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

                <?php the_content(); ?>

                <br class="clear">
            </article>
            <!-- /article -->

        <?php endwhile; ?>
        <?php else: ?>
            <!-- article -->
            <article>
                <h2><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h2>
            </article>
            <!-- /article -->

        <?php endif; ?>

        </section>
        <!-- /section -->
    </main>

    <?php //get_sidebar(); ?>

<?php get_footer(); ?>

**CSS**

.about img {
  max-width: 100%%;
  vertical-align: bottom;
  margin-left: 150px;
}

如果有人可以帮助我解决这个响应问题，将不胜感激。

Answer 1

我喜欢这样：

.about img{
    max-width:100% !important;
    height:auto;
    display:block;
}

注意：这是响应式图片，我去掉了位置规则，因为你可以自己调整

Answer 2

您的图片需要填充 100% 的容器。

.about img {
  width: 100%;
  vertical-align: bottom;
  margin-left: 150px;
}