Question

我在wordpress中创建了一个简单的页面。我制作了wordpress的自定义主题。当我进入我的页面部分，在wordpress的页面的wyswig编辑器中，我放了一个图像。问题是我有图像发布，我已经在wyswig的中心对齐但是当我在实际页面中看到它时，图像没有居中，当我进入移动视图时，我的图像无法响应，我还创建了一个css媒体查询，但它仍然无法正常工作。

这是我的代码：

<?php
/*
    Template Name: Custom Page
*/

get_header(); ?>
<div id="wrapper">
<section id="custom">
    <div class="container">

        <?php 
        if ( have_posts() ) {
            while ( have_posts() ) {
                the_post(); ?>
                <h2><?php the_title(); ?></h2>
                <hr width="30%" align="left">
                <p><?php the_content(); ?></p>
            <?php } // end while
        } // end if
        ?>

    </div>

</section>
<?php get_footer(); ?>
</div>

这是我的css @media查询，其中包含maxwidth 460：

 #custom img {
        width: 100%;
        height: auto;
    }
    #custom h2 {
    margin-top: 32%;
    }

Answer 1

您正在寻找的是max-width属性。

顺便说一句，不一定是媒体查询，例如

#custom img {
    // So we can center it
    display:inline-block;
    // Limit the size : 
    max-width: 100%;
}

然后，在您的媒体查询中，您可以调整max-width max-width:50%;

wordpress中的帖子页面图像无法居中和响应

1 个答案: