Question

我正在尝试建立一个非常基本的网站，图片位于页面中间，下面有三行文字，也是居中的。

我知道如何在更大的屏幕上观看它，但是当在较小的屏幕（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>

Answer 1

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

CSS：

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

浏览器位于480px后，它将img宽400px。您可以根据自己的喜好更改这些数字。

Answer 2

你需要研究设置流体图像，这将有助于你开始......

CSS Fluid Image Technics

这是一个例子......

<强> HTML

<section class="container">
    <img src="http://placehold.it/750x250">

    <div class="copy">
        <a href="mailto:Email@domain.com" target="_top">Email</a>
        <p>
            <span class="phone-number">Phone Number</span><br />
            <span class="tagline">Tagline</span>
        </p>
    </div>
</section>

<强> CSS

body {
    font-family: 'Helvetica', 'Arial', sans-serif;  
    background: white 
}

.container {
    bottom: 0;
    left: 0;
    height: 300px;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 100%;
}

.container img {
    max-width: 100%;
}

https://jsfiddle.net/kennethcss/71a6mngh/

图像居中（using absolute centering），当你在图像中拖动浏览器时，会自动调整它的大小......这就是流畅的图像行为（本身不需要媒体查询）。如果你仍然需要媒体查询，你可以做这样的事情......

Answer 3

您需要为图像添加最大宽度：

img {
  max-width: 100%;
}

关闭主题：<h1><center><p>..</p></center></h1>无效。只需使用<h1>..</h1>并设置样式。

<font>也无效且已弃用（就像center）

Answer 4

您可以对<img>元素使用max-width。

section img {
  max-width: 100%;
}

Answer 5

尝试以下内容，代码中的错误很少，您可以通过在目标HTML元素中添加HTML标记或添加外部或内部style来设置CSS files元素的样式。现在好了，如下所示responsive use CSS media query，定义breakpoints，您需要image进行更改。

@media screen and (max-width : 480px){
.......
.......
.......
} 
@media screen and (max-width : 320px){
.......
.......
.......
}

body{
  background:#fff;
}
#box{
  width:70%;
  height:300px;
  margin:auto;
  margin-top:20%;
}

#box > .bximg{
  width:180px;
  height:180px;
  overflow:hidden;
  margin:auto;
}
#box > .bximg > img{
  width:100%;
  min-height:100%;
}

@media screen and (max-width: 480px){
#box > .bximg{
  width:120px;
  height:120px;
 }  
}

<div id="box">
<div class="bximg">
<img src="https://source.unsplash.com/random">
</div>
<h1 style="text-align:center;margin:0px;">
<a href="mailto:Email@domain.com" style="color: #D08242" target="_top">Email</a></h1>
<p style="text-align:center;margin:10px 0px; "><font color=B5B5B5>Phone Number</font>
<p style="text-align:center;margin:10px 0px;"><i>Tagline</i></p>
</div>

Answer 6

您将要查看Mozilla文档中的媒体查询。

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

有一个链接可以帮助您更好地理解它，但基本上网页内容会根据屏幕大小调整大小。

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

6 个答案: