与CSS的响应式图像

我发现调整图像大小以使其响应变得棘手。

我正在开发一个PHP应用程序来自动将网站转换为响应版本。 我有点卡在图像上。

我已经成功地将一个包装类添加到网站上的每个图像,并可以很好地重新调整图像的大小。

我的问题在于自然比窗口小的图像,如徽标和图标。 我不想调整这些。

我的代码目前转换:

<img src="[src]" /> 

成:

 <div class="erb-image-wrapper"> <img src="[src]" /> </div> 

我在哪里使用下面的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; } 

这调整了所有图像的大小,但我只希望它调整超过页面宽度的图像。 是一种方式,我可以通过CSS实现这一点?

7 Solutions collect form web for “与CSS的响应式图像”

 .erb-image-wrapper img{ max-width:100% !important; height:auto; display:block; } 

为我工作。
感谢MrMisterMan的帮助。

在图像上也使用max-width 。 更改:

 .erb-image-wrapper img{ width:100% !important; height:100% !important; display:block; } 

至…

 .erb-image-wrapper img{ max-width:100% !important; max-height:100% !important; display:block; } 

首先用php检查图像,如果它很小,那么logo的标准尺寸提供任何其他的CSS类,不要改变它的大小

我认为你必须采取之间的脚本

这个响应很简单

  • 首先创build一个名为cell的类给它display:table-cell的属性display:table-cell
  • 那么@ max-width:700px do {display:block; width:100%; clear:both} {display:block; width:100%; clear:both}

这不是绝对的div; divs需要100%,然后max-width: - desired width -内部框架。 一个真正的响应网站有不到9行的CSS通过任何东西,你是在一个垃圾世界和复杂的事情。

PS: reset.css样式表是什么使CSS盲人有一个合乎逻辑的原因,他们首先给了默认样式。

我发现的最好的方法是设置你想要查看的图像作为背景图像,并发送一个CSS的财产的div作为封面。

 background-image : url('YOUR URL'); background-size : cover 

使用最大宽度和自动高度,并将图像显示为以下块:

 image { max-width:100%; height: auto; display:block; } 

身体

{background-image:url(“ http://media2.intoday.in/indiatodayhttp://img.dovov.comstories/vijay-story_647_062216110217.jpg ”); background-size:100vw 100vh; 背景重复:不重复; ; }

  • 避免头文件的循环依赖关系
  • 数据库devise的调查
  • 有没有一个典型的状态机实现模式?
  • ON 是什么意思?
  • 国际地理地址如何存储在关系数据库中?
  • Android MVVMdevise模式示例
  • C ++中使用哪种Typesafe枚举?
  • 关于原型模式的问题
  • 如何更改新的TabLayout指标的颜色和高度
  • tar:添加当前目录下的所有文件和目录INCLUDING .svn等等
  • “忘记密码”实施的最佳途径?