我正在尝试构建一个非常基本的网站,其中的图像位于页面中间,下面有三行文本,也居中。
我有它在大屏幕上的显示效果,但在小屏幕 (iPhone) 上查看时图像太大。我需要根据屏幕分辨率调整图像大小。
我已经做了一些谷歌搜索,知道这是可能的,但一直无法让它发挥作用。 HTML/CSS 不是我的强项。任何帮助将非常感激。这是我的代码:
<html>
<style>
body {
font-family: 'Helvetica', 'Arial', sans-serif;
background: white }
section {
background: white;
color: black;
border-radius: 1em;
padding: 1em;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
</style>
<section>
<IMG src="Logo.png" alt="Logo">
<br><br>
<h1><center><p><a href="mailto:Email@domain.com" style="color: #D08242" target="_top">Email</a>
<p><font color=B5B5B5>Phone Number
<font size=7> <p><i>Tagline</i></center></font>
</section>
</html>
原文由 user51279 发布,翻译遵循 CC BY-SA 4.0 许可协议
您可以使用媒体查询。尝试在您的 CSS 中添加以下代码。
CSS:
一旦浏览器位于
480px
,它将生成img
宽度400px
。您可以根据自己的喜好更改这些数字。