与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; 背景重复:不重复; ; }

  • 用于打印网页的像素安全宽度?
  • 域对象,POCO和实体有什么区别?
  • 为什么不jQuery炸弹,如果你的select器对象是无效的?
  • 为什么是“初始化”在std :: ios_base ::初始大写?
  • C(或一般的程序编程)的devise原则,最佳实践和devise模式?
  • 位图性能优化模式
  • RESTful发送命令的方式
  • Java中if语句的长列表
  • 实际的面向对象的devise模式的例子
  • 引导3模态火灾并导致页面左移/浏览器滚动条问题
  • 连接表的最佳SQL索引