HTML/CSS 使图像在较小的屏幕上调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39759892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS Make image resize on smaller screens
提问by user51279
I'm trying to build a very basic site with an image centered in the middle of the page with three lines of text below it, also centered.
我正在尝试构建一个非常基本的网站，其图像居中位于页面中间，下方有三行文本，也居中。
I have it how I want it to look on a larger screen, but when viewed on a smaller screen (iPhone) the image is too large. I need to have the image resize based on the screen resolution.
我希望它在更大的屏幕上看起来如何，但是在较小的屏幕 (iPhone) 上查看时，图像太大了。我需要根据屏幕分辨率调整图像大小。
I've done some Google'ing and know this is possible, but have not been able to get it to work. HTML/CSS is not my strong suite. Any help would be much appreciated. Here is my code:
我已经做了一些 Google'ing 并且知道这是可能的，但一直无法让它工作。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 protected]" style="color: #D08242" target="_top">Email</a>
<p><font color=B5B5B5>Phone Number
<font size=7> <p><i>Tagline</i></center></font>
</section>
</html>
回答by Gosi
You can use media queries. Try to add the following code in your CSS.
您可以使用媒体查询。尝试在您的 CSS 中添加以下代码。
CSS:
CSS：
@media screen and (max-width: 480px) {
img {
width: 400px;
}
}
Once the browser is at 480px, it will make the imgwidth 400px. You can change these numbers to suit your preference.
一旦浏览器处于480px，它将使img宽度400px。您可以根据自己的喜好更改这些数字。
回答by Kenneth Stoddard
You need to look into setting up fluid images, this will help you get started...
您需要研究设置流体图像，这将帮助您开始...
Here is an example...
这是一个例子...
HTML
HTML
<section class="container">
<img src="http://placehold.it/750x250">
<div class="copy">
<a href="mailto:[email protected]" target="_top">Email</a>
<p>
<span class="phone-number">Phone Number</span><br />
<span class="tagline">Tagline</span>
</p>
</div>
</section>
CSS
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/
https://jsfiddle.net/kennethcss/71a6mngh/
The image is centered (using absolute centering), and when you drag the browser in the image automatically adjust it's size...this is how fluid images behave (no need for media queries per se). If you still need a media query you can do something like this...
图像居中（使用绝对居中），并且当您在图像中拖动浏览器时会自动调整其大小……这就是流体图像的行为方式（本身不需要媒体查询）。如果您仍然需要媒体查询，您可以执行以下操作...
回答by Wim Mertens
You need to add a max-width to the image:
您需要为图像添加最大宽度：
img {
max-width: 100%;
}
just off topic: <h1><center><p>..</p></center></h1>is invalid. Just use <h1>..</h1>and style it.
题外话：<h1><center><p>..</p></center></h1>无效。只需使用<h1>..</h1>和设计它。
<font>is also invalid and deprecated (just like center)
<font>也无效且已弃用（就像center）
回答by frnt
Try something as below, there were few error in your codes, you could style your HTMLelements by adding styletag in your targeted HTML element or by adding external or internal CSS files. Well now to make it responsive use CSS media queryas below, define breakpointswhere you need your imageto change.
尝试如下操作，您的代码中几乎没有错误，您可以HTML通过style在目标 HTML 元素中添加标签或添加 external 或 internal 来设置元素样式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 protected]" 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>回答by duonghc
You can use max-width for <img>element.
您可以对<img>元素使用 max-width 。
section img {
max-width: 100%;
}
回答by Jmorel88
You're going to want to take a look at media queries in the Mozilla docs.
您将需要查看 Mozilla 文档中的媒体查询。
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
There's a link to help you get a better understanding of it but basically the web content will resize based on the size of the screen.
有一个链接可以帮助您更好地理解它，但基本上网络内容会根据屏幕大小调整大小。
