Question

我有这个网站，我一直在做一个业余爱好，我遇到了一个我无法找到解决方案的问题。

网站：josesebastianmanunta.com/daniel

问题：在下面的代码中，我使用％作为调整大小的宽度，但是在调整大小时，.sec1中的img调整大小但没有正确调整大小。它与.sideslides的高度不匹配。这也是我第一次来这里。如果我做错了，请告诉我。谢谢！所有代码都可以通过浏览器看到。

问题代码：

<div id="sec1_and_side">
    <div class="sec1">
    <img src="images/dan.jpg"  id="dan"/>
    </div>
    <div class="sideslides">
        <div class="sec sideslider">
            <img src="images/feature-3.jpg" id="feature3" class="img1"/>
            <img src="images/newfeature/piece5.jpg" class="img2"/>
        </div>
        <div class="sec sideslider">
            <img src="images/feature-4.jpg" id="feature4" class="img1"/>
            <img src="images/newfeature/piece4.jpg" class="img2"/>
        </div>
        <div class="sec sideslider">
            <img src="images/feature-5.jpg" id="feature5" class="img1"/>
            <img src="images/newfeature/piece3.jpg" class="img2"/>
        </div>
    </div>
</div>

Answer 1

要使主图像的高度与右侧的3个图像的高度相匹配，主图像需要更大一些。大约大6px，以匹配右侧面板中的填充间隙。

使用图像编辑器在顶部将画布调整为6px，并填充白色。

您可以通过添加以下内容尝试使用CSS修复它，但它不会很好地调整大小。将绝对值px与百分比混合从来不会产生良好的结果。

.sec1 {
    vertical-align: baseline;
    padding-top: 6px;
    background-color: white;
}

更新：在最大尺寸下，您会注意到右侧列中的顶部和第一个图像之间存在间隙。这是因为右列中的图像具有最大高度。要解决此问题，并允许主图像的高度与右列匹配，请在max-height上放置.sec1。使用CSS解决方案，此max-height将为375px，以考虑填充顶部。使用经过调整大小的图像解决方案，它将是381像素（125像素* 3 + 3像素* 2）。

自动调整图像大小

1 个答案: