Html 使图像具有响应性 - 最简单的方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15458650/
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
Make an image responsive - the simplest way
提问by Anonymous
I notice that my code is responsive, in the fact that if I scale it down to the size of a phone or tablet - all of the text, links, and social icons scale accordingly.
我注意到我的代码是响应式的，事实上，如果我将其缩小到手机或平板电脑的大小 - 所有文本、链接和社交图标都会相应地缩放。
However, the ONLY thing that doesn't is my image in the body; which is wrapped in paragraph tags... with that being said, is there a simple way to make the image responsive as well?
然而，唯一没有的就是我在身体中的形象；它被包裹在段落标签中......话虽如此，是否有一种简单的方法也可以使图像具有响应性？
Here's the code that I used to have my image show in the body:
这是我用来在正文中显示图像的代码：
<body>
</center>
<p><a href="MY WEBSITE LINK" target="_blank"><img src="IMAGE LINK" border="0" alt="Null"></a></p>
</center>
</body>
回答by Nick Ginanto
You can try doing
你可以尝试做
<p>
<a href="MY WEBSITE LINK" target="_blank">
<img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</a>
</p>
This should scale your image if in a fluid layout.
如果在流体布局中，这应该缩放您的图像。
For responsive (meaning your layout reacts to the size of the window) you can add a class to the image and use @mediaqueries in CSS to change the width of the image.
对于响应式（意味着您的布局对窗口的大小做出反应），您可以向图像添加一个类并使用@mediaCSS 中的查询来更改图像的宽度。
Note that changing the height of the image will mess with the ratio.
请注意，更改图像的高度会影响比例。
回答by user706001
Width: 100% will break it when you view on a wider are.
宽度：100% 会在您查看更宽的区域时破坏它。
Following is Bootstrap's img-responsive
以下是 Bootstrap 的 img-responsive
max-width: 100%;
display:block;
height: auto;
回答by javidazac
I would also recommend to use all the CSS properties in a different file than the HTML file, so you can have your code organized better.
我还建议在与 HTML 文件不同的文件中使用所有 CSS 属性，以便更好地组织代码。
So to make your img responsive, I would do:
所以为了让你的 img 响应，我会这样做：
First, name your <img>tag using a classor idattribute in your HTML file:
首先，在 HTML 文件中<img>使用classorid属性命名标签：
<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">
Then, in my CSS file I would make the changes to make it responsive:
然后，在我的 CSS 文件中，我将进行更改以使其具有响应性：
.responsive-image {
height: auto;
width: 100%;
}
回答by OB7
To make all images on your website responsive, don't change your inline HTML from correct markup, as width:100%doesn't work in all browsers and causes problems in Firefox. You want to place your images on your website how you normally should:
要使您网站上的所有图像都具有响应性，请不要更改正确标记的内嵌 HTML，因为width:100%这不适用于所有浏览器并会导致 Firefox 出现问题。您希望按照通常的方式将图像放置在您的网站上：
<img src="image.jpg" width="1200px" height="600px" />
And then add to your CSS that any image max-width is 100% with height set to auto:
然后在您的 CSS 中添加任何图像最大宽度为 100% 且高度设置为自动的：
img {
max-width: 100%;
height: auto;
}
That way your code works in all browsers. It will also work with custom CMS clients (i.e. Cushy CMS) that require images to have the actual image size coded into the inline HTML, and it is actually easier this way when all you need to do to make images responsive is simply state in your CSS file that the max-width is 100% with height set to auto. Don't forget height: autoor your images will not scale properly.
这样您的代码就可以在所有浏览器中运行。它还可以与自定义 CMS 客户端（即 Cushy CMS）一起使用，这些客户端要求图像将实际图像大小编码到内嵌 HTML 中，并且当您需要做的所有使图像具有响应性的工作只是在您的最大宽度为 100% 且高度设置为自动的 CSS 文件。不要忘记，height: auto否则您的图像将无法正确缩放。
回答by Abhishek Goel
I use this all the time
我经常用这个
You can customize the imgclass and the max-widthproperty:
您可以自定义img类和max-width属性：
img{
width: 100%;
max-width: 800px;
}
max-widthis important. Otherwise your image will scale too much for the desktop. There isn't any need to put in the heightproperty, because by default it is auto mode.
max-width很重要。否则您的图像将在桌面上缩放太多。没有任何需要放入height属性，因为默认情况下它是自动模式。
回答by Sumith Harshan
I'm using this technique to keep the logo as responsive for mobile devices as a simple way. The logo will resize automatically.
我正在使用这种技术以一种简单的方式使徽标对移动设备具有响应性。徽标将自动调整大小。
HTML
HTML
<div id="logo_wrapper">
<a href="http://example.com" target="_blank">
<img src="http://example.com/image.jpg" border="0" alt="logo" />
</a>
</div>
CSS
CSS
#logo_wrapper img {
max-width: 100%;
height: auto;
}
回答by Beck
If you are constrained to using an <img>tag:
如果您被限制使用<img>标签：
I've found it much easier to set a <div>or any other element of your choicewith a background-image, width: 100%and background-size: 100%.
我发现使用,和设置 a<div>或您选择的任何其他元素要容易得多。background-imagewidth: 100%background-size: 100%
This isn't the end all be allto responsive images, but it's a start. Also, try messing around with background-size: coverand maybe some positioning with background-position: center.
这并不是响应式图像的全部结束，而是一个开始。此外，尝试background-size: cover使用background-position: center.
CSS:
CSS：
.image-container{
height: 100%; /* It doesn't have to be '%'. It can also use 'px'. */
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url(../img/exampleImage.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size: 100%;
}
HMTL:
HMTL：
<div class="image-container"></div>
回答by JacobG182
To make an image responsive use the following:
要使图像响应使用以下内容：
CSS
CSS
.responsive-image {
width: 950px;//Any width you want to set the image to.
max-width: 100%;
height: auto;
}
HTML
HTML
<img class="responsive-image" src="IMAGE URL">
回答by btevfik
Set height or the width of the image to be %100.
将图像的高度或宽度设置为 %100。
There is more in Stack Overflow question How do I auto-resize an image to fit a 'div' container?.
Stack Overflow 问题中还有更多问题如何自动调整图像大小以适合“div”容器？.
回答by pixel 67
Images should be set like this
图像应该这样设置
img { max-width: 100%; }
