html - 如何在wordpress模板中调整图片大小

Question

我正在使用 wordpress 模板来控制我的网站。在主页上有一个小标题，上面有“主页关于我们联系我们”等等，然后在它下面是一个图像，该图像转换为另一个图像，该图像转换为另一个图像。这张图片对我来说太大了，所以我想缩小它。所以我转到 CSS 并调整图像大小，但是因为图像底部的文本被截断了。

我想保持图像的宽度，但只是让它更短一点，比如原始设计的 75% 左右。

下面是我认为适用的代码

.camera_wrap {
    height: 672px!important;
    max-width: 1920px;
    display: none;
    position: relative;
    z-index: 0;
    margin: 0 auto 60px!important;

我添加了 height: 672px!important; 代码，它使它达到我想要的高度，但底部再次被切断。我宁愿让 CSS 重新调整图像的大小而不是剪辑它。但是我所有的搜索都没有找到如何做到这一点。我只是在寻找调整大小属性。

Answer 1

尝试使用 img 的路径而不是图像类来控制图像的样式。

示例 html

<div class="image-div">
    <img class="image">
</div>

代替

.image { height: 500px; }

尝试

.image-div img { height: 500px; }

另外，这里有一个 fiddle 的例子，以及 fiddle 中的一个例子，说明如何使用第 nth-child 影响仅对第二张图像的更改

https://jsfiddle.net/Hastig/g6m5nqc9/1/

.image:nth-child(n+2) {
    height: 75px;
}