将图片大小调整为包含文字的

时间:2018-05-01 08:49:49

标签: html css

我目前正致力于改变wordpress主题中的一些内容。现在我正在将banckground-image从css更改为html,因此图像不会加载css,而是加载所有html。我们将遵循一些代码,以便对我工作的地方提供一些见解,并将有助于解释更多内容。

    <div class="wrapper" style="

                                                        color: #ffffff;
                                border-color: #ffffff;
                                                                                text-align: center;
                                                ">
                                                                <figure>
                                    <div>
                                        <picture>
                                <source media='(min-width: 1025px)' srcset='http://127.0.0.1/April/hayona%20-%20fields/fields%20-%20image_scaling/wp-content/uploads/2018/04/greg-rakozy-129733-unsplash1-e1524054200639-1920x1080.jpg'>
<source media='(min-width: 1025px) and (min-resolution: 192dpi)' srcset='http://127.0.0.1/April/hayona%20-%20fields/fields%20-%20image_scaling/wp-content/uploads/2018/04/greg-rakozy-129733-unsplash1-e1524054200639-1920x1080.jpg'>
<source media='(min-width: 601px)' srcset='http://127.0.0.1/April/hayona%20-%20fields/fields%20-%20image_scaling/wp-content/uploads/2018/04/greg-rakozy-129733-unsplash-e1524054018487.jpg'>
<source media='(min-width: 300px)' srcset='http://127.0.0.1/April/hayona%20-%20fields/fields%20-%20image_scaling/wp-content/uploads/2018/04/greg-rakozy-129733-unsplash-e1524054018487.jpg'>
<source media='(min-width: 601px) and (min-resolution: 192dpi)' srcset='http://127.0.0.1/April/hayona%20-%20fields/fields%20-%20image_scaling/wp-content/uploads/2018/04/greg-rakozy-129733-unsplash-e1524054018487.jpg'>
<source media='(min-width: 300px) and (min-resolution: 192dpi)' srcset='http://127.0.0.1/April/hayona%20-%20fields/fields%20-%20image_scaling/wp-content/uploads/2018/04/greg-rakozy-129733-unsplash-e1524054018487.jpg'>
<img src='http://127.0.0.1/April/hayona%20-%20fields/fields%20-%20image_scaling/wp-content/uploads/2018/04/greg-rakozy-129733-unsplash-e1524054018487.jpg'></picture>
                                                        </div>
                                                    </figure>                                                           <div class="overlay"></div>
                                            <div class="page-hero__content">
                            <div class="inner">
                                <div class="columns">
                                    <div class="column1-1">

                                        <h2>Test</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Donec sollicitudin molestie malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Curabitur aliquet quam id dui posuere blandit. Proin eget tortor risus. Donec sollicitudin molestie malesuada. Nulla porttitor accumsan tincidunt. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

这里的代码只是一个几乎可以在网站上使用的部分。我面临的问题是图像的高度不适合于内容。这就是它现在看起来的样子this is how it looks right now.我希望你可以帮助我将图像大小调整到文本的高度。如有需要,我会尽快回复提供信息。提前谢谢。

1 个答案:

答案 0 :(得分:0)

一段时间后我自己找到了解决方案。在我的主题的functions.php中,我添加了各种自定义图像大小,并为正确类型的列类型选择正确的图像大小。