如何在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 重新调整图像大小而不是剪辑它。但是我所有的搜索都没有找到如何做到这一点。我只是在寻找 re-size 属性。

Answer 1

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

示例 html

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

而不是

.image { height: 500px; }

试试

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

另外，这里有一个小提琴的例子和一个小提琴的例子，说明如何使用 nth-child 仅影响对第二张图像的更改

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

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