我花了一些時間試圖解決這個問題，但沒有運氣。我正在嘗試將文本元素與影像旁邊的影像對齊，如下圖所示。我能夠通過絕對定位做到這一點。
絕對定位
但是我也希望我的頁面具有回應性，因此我決定使用彈性框容器將文本元素和影像元素并排放置，并在調整視窗大小時獲得相等的距離。但是，當我增加影像的大小時，內容區域只會忽略其填充邊距和父容器。它在視窗寬度和純白色背景上創建滾動。
回應式影像
很想聽聽人們認為我做錯了什么。也想聽聽人們會去創造我正在尋找的預期效果的任何其他方式。
這是我下面的代碼??
<body>
<header>
<div class="container">
<div class="justify">
<div class="inline">
<h1>App name</h1>
<h2>Download on the app store!</h2>
<a href="https://www.apple.com/uk/app-store/" target="_blank"><img class="downloadimg" src="appstore.png" alt="download link">
</a>
</div>
<div class="inline">
<img class="werewolf" src="werewolf.png" alt="app logo">
</div>
</div>
</div>
</header>
</body>
</html>
CSS code:
body{
margin: 0px;
padding: 0px;
font-family: 'Bebas Neue', cursive;
}
header{
background-color: aqua;
font-size: 40px;
padding-left: 10%;
padding-top: 10%;
padding-bottom:10%;
border-style: dashed;
border-color: rgb(255, 0, 0);
}
.justify{
display: flex;
align-items: center;
justify-content: space-between;
}
.downloadimg{
width: 50%;
}
.inline{
border-style: dashed;
border-color: rgb(255, 0, 0);
}
.werewolf{
width: 140%;
}
uj5u.com熱心網友回復：
嘗試將其添加到您的影像 css 規則中：
image.werewolf {
display: block; /* or inline-block */
max-width: 100%;
height: auto; /* to maintain aspect ratio */
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418315.html
標籤：
上一篇：如何同時顯示兩種不同的圖表模式