使用 CSS 的响应式图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11736363/
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
Responsive Images with CSS
提问by Dan Hanly
I'm finding it tricky to resize images to make them responsive.
我发现调整图像大小以使其具有响应性很棘手。
I'm developing a php application to automatically convert a website to a responsive version. I'm a little stuck on the images.
我正在开发一个 php 应用程序来自动将网站转换为响应式版本。我有点卡在图像上。
I've successfully added a wrapper class to every image on a website and can re-size the images quite well.
我已经成功地为网站上的每个图像添加了一个包装类，并且可以很好地重新调整图像的大小。
My issue lies with images that are naturally smaller than the the window, such as logos and icons. I don't want to resize these.
我的问题在于自然小于窗口的图像，例如徽标和图标。我不想调整这些大小。
My code currently converts:
我的代码目前转换：
<img src="[src]" />
into:
进入：
<div class="erb-image-wrapper">
<img src="[src]" />
</div>
Where I use the following CSS:
我在哪里使用以下 CSS：
.erb-image-wrapper{
max-width:90%;
height:auto;
position: relative;
display:block;
margin:0 auto;
}
.erb-image-wrapper img{
width:100% !important;
height:100% !important;
display:block;
}
This resizes all images, but I only want it to resize images that are over the width of the page. Is the a way I can achieve this via CSS?
这会调整所有图像的大小，但我只希望它调整超过页面宽度的图像的大小。我可以通过 CSS 实现这一点吗？
回答by Dan Hanly
.erb-image-wrapper img{
max-width:100% !important;
height:auto;
display:block;
}
Worked for me.
Thanks for MrMisterMan for his assistance.
为我工作。
感谢 MrMisterMan 的帮助。
回答by punkrockbuddyholly
Use max-widthon the images too. Change:
也用于max-width图像。改变：
.erb-image-wrapper img{
width:100% !important;
height:100% !important;
display:block;
}
to...
到...
.erb-image-wrapper img{
max-width:100% !important;
max-height:100% !important;
display:block;
}
回答by Sahil Popli
check the images first with php if it is small then the standerd size for logo provide it any other css class and dont change its size
如果图像很小，请先使用 php 检查图像，然后徽标的标准大小为其提供任何其他 css 类，并且不要更改其大小
i think you have to take up scripting in between
我认为您必须在两者之间进行脚本编写
回答by Ben Edwards
um responsive is simple
嗯响应很简单
- first off create a class named cell give it the property of
display:table-cell - then @
max-width:700pxdo{display:block; width:100%; clear:both}
- 首先创建一个名为 cell 的类，赋予它属性
display:table-cell - 然后@
max-width:700px做{display:block; width:100%; clear:both}
and that's it no absolute divs ever; divs needs to be 100% then max-width: - desired width -for inner framming. A true responsive sites has less than 9 lines of css anything passed that you are in a world of shit and over complicated things.
这就是没有绝对的 div；divs 需要为 100% 然后max-width: - desired width -用于内部框架。一个真正的响应式网站只有不到 9 行 css 任何传递给你在一个狗屎和复杂事物的世界中的东西。
PS : reset.cssstyle sheets are what makes css blinds there was a logical reason why they gave default styles in the first place.
PS：reset.css样式表是使 css 百叶窗的原因，他们首先给出默认样式是有逻辑的。
回答by Naseeruddin V N
the best way i found was to set the image you want to view responsively as a background image and sent a css property for the div as cover.
我发现的最好方法是将要响应查看的图像设置为背景图像，并为 div 发送一个 css 属性作为封面。
background-image : url('YOUR URL');
background-size : cover
回答by Mizo Games
Use max-width:100%;, height: auto;and display:block;as follow:
使用max-width:100%;，height: auto;并且display:block;如下：
image {
max-width:100%;
height: auto;
display:block;
}
