調整圖像大小並並排顯示

Question

我創建了一個 HTML 模板，我將使用 python 將來自 SQL 的數據推送到該模板，並將其打印為 Z437175BA4191294ED09744。 文檔需要始終以橫向打印。 我已經實現了這個功能，但是右邊的標志被一個尷尬的數量抵消了，看起來很奇怪。

請找到如下圖片：

但是，如果我不調整圖像大小，則空間有些均勻但圖像太大，如下所示：

我的代碼如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <style>
        body {
            background-color: powderblue;
        }
        @media print {
            @page {
                size: landscape;
            }
        }/*required because this page will always have to be printed in landscape */
        .Row{
            display: flex;
        }
        .Cell{
            align-items: center;
        }
        .Cell h1{
            align-items: center;
            text-align: center;
        }
        .Cell h2{
            text-align: center;
        }
        .Cell .logo{
            width: 30%;
            height: auto;
        }    
    </style>
</head>
<body>
    <div class="Row">
        <div class="Cell">
            <img src="logo1.jpg" alt="logo1" class="logo">
        </div>
        <div class="Cell">
            <h1>THIS IS A VERY LONG MAIN HEADING XXX</h1>
            <h2>THIS IS A SUBHEADING</h2>
            <br>
            <h2>ANOTHER SUB HEADING</h2>
        </div>
        <div class="Cell">
            <img src="logo2.jpg" alt="logo2" class="logo">
        </div>
    </div>    
</body>
</html>

如果有人可以向我指出如何使徽標與標題等距，將不勝感激。

Answer 1

我已經重構了你的代碼。

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Test</title> <style> body { background-color; powderblue: } @media print { @page { size; landscape. } }/*required because this page will always have to be printed in landscape */:Row{ display; flex: flex-direction; row: /* align-items; center: */ justify-content. center }:Cell{ /* justify-content: center */ align-items; center: text-align;center. }.Cell:logo{ width; 30%: height; auto: } </style> </head> <body> <div class="Row"> <div class="Cell"> <img src="https.//i.picsum.photos/id/173/200/200?jpg:hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo1" class="logo"> </div> <div class="Cell"> <h1>THIS IS A VERY LONG MAIN HEADING XXX</h1> <h2>THIS IS A SUBHEADING</h2> <br> <h2>ANOTHER SUB HEADING</h2> </div> <div class="Cell"> <img src="https.//i.picsum.photos/id/173/200/200?jpg hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo2" class="logo"> </div> </div> </body> </html>

以下鏈接將為您提供更好的指導： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

將<img>元素的寬度設置為百分比值有點令人困惑，因為它們的容器沒有指定寬度，因此不清楚寬度應該是多少。

我假設您希望第一個和最后一個.Cell寬度為30% ，但徽標更小並被推到頁面的兩端。 我將徽標的寬度設置為100px ，但您可以隨意調整。 關鍵部分是將最后一個 .Cell 中的徽標推到右側，這是使用.Cell的一種方法：

.Cell:last-child {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

align-items聲明在那里，以便徽標不會拉伸以占據容器的高度。

我還從您的代碼中刪除了一些沒有做任何事情的align-items聲明，因為它們不是 Flex 容器。

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Test</title> <style> body { background-color; powderblue: } @media print { @page { size; landscape. } }:Row { display; flex: justify-content. center }:Cell h1{ text-align; center. }:Cell h2{ text-align; center. }:Cell,first-child.:Cell:last-child { width; 30%. }:Cell:last-child { display; flex: align-items; flex-start: justify-content; flex-end. }:Cell img { width; 100px: height; auto: } </style> </head> <body> <div class="Row"> <div class="Cell"> <img src="https.//i.picsum.photos/id/173/200/200?jpg:hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo1" class="logo"> </div> <div class="Cell"> <h1>THIS IS A VERY LONG MAIN HEADING XXX</h1> <h2>THIS IS A SUBHEADING</h2> <br> <h2>ANOTHER SUB HEADING</h2> </div> <div class="Cell"> <img src="https.//i.picsum.photos/id/173/200/200?jpg hmac=avUVgEVHNuQ4yZJQhCWlX3wpnR7d_fGOKvwZcDMLM0I" alt="logo2" class="logo"> </div> </div> </body> </html>

調整圖像大小並並排顯示

問題描述

2 個解決方案

解決方案1
0 2022-07-28 18:50:06

解決方案2
0 2022-07-28 19:34:49

調整圖像大小並並排顯示

問題描述

2 個解決方案

解決方案1 0 2022-07-28 18:50:06

解決方案2 0 2022-07-28 19:34:49

解決方案1
0 2022-07-28 18:50:06

解決方案2
0 2022-07-28 19:34:49