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

Question

我是一个新手，有深入的工作，包括Wordpress

超文本标记语言

<?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

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

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

Answer 2

我喜欢这样：

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

注意：这是为了响应图像，我删除了位置规则，因为您可以自行调整