Question

我正在使用wordpress模板来控制我的网站。在主页上是一个带有“Home About Us Contact Us”等的小标题，然后在下面是转换到另一个图像的图像，该图像转换到另一个图像。这张图片对我来说太大了，所以我试图缩小它。所以我转到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;
}

如何在wordpress模板中重新调整图像大小

1 个答案: