HTML/CSS 使图像在较小的屏幕上调整大小

新手上路,请多包涵

我正在尝试构建一个非常基本的网站,其中的图像位于页面中间,下面有三行文本,也居中。

我有它在大屏幕上的显示效果,但在小屏幕 (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 许可协议

阅读 198
1 个回答

您可以使用媒体查询。尝试在您的 CSS 中添加以下代码。

CSS:

 @media screen and (max-width: 480px) {
    img {
         width: 400px;
    }
}

一旦浏览器位于 480px ,它将生成 img 宽度 400px 。您可以根据自己的喜好更改这些数字。

原文由 Gosi 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题