php - 如何通过 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;
}

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