html - 根据图像方向更改时更改边距

Question

我目前正在做一个项目，我们利用 Twig 来获取数据，HTML/CSS 来显示它，然后通过 weasyprint 处理它来生成一个 pdf。

一张图片让我挠头。我们通过不同的服务获取此图像，因此它可以是垂直或水平方向的。我在 div 内有一个适合水平方向的边距，但取代了垂直方向。

如果图像是垂直方向的，如何使图像具有不同的边距？

由于这是以 pdf 格式打印的，因此我使用的是 mm 而不是 px。

的CSS：

#container {
    background-color: rgb(255, 255, 255);
    position: absolute; 
    left:81.02mm;
    top: 47.83mm;
    width: 95.58mm; 
    height:103.63mm; 
    z-index: 5;
    }

#child {
    background-color: rgb(56, 54, 54);
    display:block;
    max-width: 82.21mm;
    max-height: 75.1mm;
    width:auto;
    height:auto;
    margin-left: 6.69mm;
    margin-top:6.52mm;
    }

HTML：

<div id="container">
    <img src="link to pictures" id="child" />
    <p id="textContainer">
    <span class="boldText">Text</span>
    </p>    
</div>

标签： htmlcssimagetwig