在浏览器大小上按行调整图像大小

用户名

我有三个内联图像。它们的宽度为330像素,分隔为10像素。当显示在手机上或1,010px以下的任何窗口中时,图像在另一个下方显示。我希望它们减小尺寸,以便它们保持内联。我试图通过在代码周围放置100px的div来模拟jsfiddle中的问题。实际代码中没有该内容。如您所见,图像不在一行上。这里有许多如何执行此操作的示例,但是没有一个可以解决多个图像,我可以找到。有没有办法做到这一点?jsfiddle

    <style>
    .imagewrapper img {
      max-width: 90%;
      height: auto;
    }
    .box_row_f { display:inline-block; border:4px solid #5CB65C } 
    .box_row_n { display:inline-block; border:4px solid #5CB65C; margin-left:10px } 
    </style>

    <div style="width:100px">
      <div class="imagewrapper">
        <div class="box_row_f"><img src="someimage.jpg"></div>
        <div class="box_row_f"><img src="someimage.jpg"></div>
        <div class="box_row_f"><img src="someimage.jpg"></div>
      </div>
    </div>
贝兹德·莫斯塔法(Baezid Mostafa)

如果您处理大量图像,那么最好为所有图像创建一个响应式图像类,并且原始图像尺寸是否较大也无关紧要。还可以在您的css box_row_n中看到它,但是我在您的html部分找不到此类。我不知道为什么您将100px用于第一格。无论如何,您都可以使用它。小提琴

 body{
 margin:0;
}
.imagewrapper {
 display: inline-flex;
}

.img-responsive {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: auto;
}
  

.box_row_f {
  border: 4px solid #5CB65C;
  margin-left: 10px;
}
  <div class="imagewrapper">
<div class="box_row_f"><img class="img-responsive" src="//dummyimage.com/700x350"></div>
<div class="box_row_f"><img class="img-responsive" src="//dummyimage.com/700x350"></div>
<div class="box_row_f"><img class="img-responsive" src="//dummyimage.com/700x350"></div>
  </div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

随着浏览器高度的变化,以水平布局调整图像大小

来自分类Dev

元素在浏览器上移动的位置重新调整大小,无济于事

来自分类Dev

在浏览器上呈现报告后,手动调整列宽的大小

来自分类Dev

如何在浏览器调整大小时保持图像和表格单元格的大小相对

来自分类Dev

调整浏览器大小时CSS容器未调整

来自分类Dev

在浏览器调整大小(视口宽度)上动态添加类

来自分类Dev

如果调整了浏览器窗口的大小,是否可以重新计算使用的“ srcset”图像?

来自分类Dev

调整浏览器大小时大图像会移动

来自分类Dev

通过jQuery根据浏览器宽度(调整大小)在cilck上切换类

来自分类Dev

如何使图像自动调整大小以适合浏览器窗口的高度

来自分类Dev

调整浏览器窗口大小并截图

来自分类Dev

调整浏览器页面大小时放大/缩小背景图像

来自分类Dev

当浏览器水平调整大小时,图像缩小

来自分类Dev

CSS-如何在调整浏览器大小时使用背景图像调整texbox的大小?

来自分类Dev

调整浏览器大小时出现在屏幕上的图标

来自分类Dev

如何通过动态更改浏览器大小来使图像自动调整大小?

来自分类Dev

如何确保DIV中的图像随浏览器调整大小而调整

来自分类Dev

调整浏览器窗口大小时,图像顶部的HTML按钮不会保持固定

来自分类Dev

调整Web浏览器大小时如何使图像按钮保持在原位

来自分类Dev

调整浏览器大小时css容器未调整

来自分类Dev

如何随着浏览器宽度/高度的变化动态调整图像网格的大小?

来自分类Dev

CSS行高调整浏览器文本大小

来自分类Dev

调整浏览器大小时,大图像会移动

来自分类Dev

调整浏览器大小时,图像上的文本不起作用

来自分类Dev

如何在div元素中获取浮动图像行以使用浏览器窗口调整大小

来自分类Dev

如何使用浏览器大小单独调整div的大小?

来自分类Dev

通过jQuery根据浏览器宽度(调整大小)在cilck上切换类

来自分类Dev

当我调整浏览器大小时,元素与图像重叠

来自分类Dev

在浏览器窗口调整大小后找出新的图像宽度高度

Related 相关文章

  1. 1

    随着浏览器高度的变化,以水平布局调整图像大小

  2. 2

    元素在浏览器上移动的位置重新调整大小,无济于事

  3. 3

    在浏览器上呈现报告后,手动调整列宽的大小

  4. 4

    如何在浏览器调整大小时保持图像和表格单元格的大小相对

  5. 5

    调整浏览器大小时CSS容器未调整

  6. 6

    在浏览器调整大小(视口宽度)上动态添加类

  7. 7

    如果调整了浏览器窗口的大小,是否可以重新计算使用的“ srcset”图像?

  8. 8

    调整浏览器大小时大图像会移动

  9. 9

    通过jQuery根据浏览器宽度(调整大小)在cilck上切换类

  10. 10

    如何使图像自动调整大小以适合浏览器窗口的高度

  11. 11

    调整浏览器窗口大小并截图

  12. 12

    调整浏览器页面大小时放大/缩小背景图像

  13. 13

    当浏览器水平调整大小时,图像缩小

  14. 14

    CSS-如何在调整浏览器大小时使用背景图像调整texbox的大小?

  15. 15

    调整浏览器大小时出现在屏幕上的图标

  16. 16

    如何通过动态更改浏览器大小来使图像自动调整大小?

  17. 17

    如何确保DIV中的图像随浏览器调整大小而调整

  18. 18

    调整浏览器窗口大小时,图像顶部的HTML按钮不会保持固定

  19. 19

    调整Web浏览器大小时如何使图像按钮保持在原位

  20. 20

    调整浏览器大小时css容器未调整

  21. 21

    如何随着浏览器宽度/高度的变化动态调整图像网格的大小?

  22. 22

    CSS行高调整浏览器文本大小

  23. 23

    调整浏览器大小时,大图像会移动

  24. 24

    调整浏览器大小时,图像上的文本不起作用

  25. 25

    如何在div元素中获取浮动图像行以使用浏览器窗口调整大小

  26. 26

    如何使用浏览器大小单独调整div的大小?

  27. 27

    通过jQuery根据浏览器宽度(调整大小)在cilck上切换类

  28. 28

    当我调整浏览器大小时,元素与图像重叠

  29. 29

    在浏览器窗口调整大小后找出新的图像宽度高度

热门标签

归档