根据屏幕大小调整博客图像小部件的大小

Question

我使用以下代码在博主博客中并排显示一些图像，但我遇到了显示大小问题

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table border="0">
<tr>
<td><a href="URL" target="_blank" title="pic1">
<img height=200 width=120 src="IMAGE LINK" alt="pic name" style="border:none;"/></a></td>
<td><a href="URL" target="_blank" title="pic2">
<img height=200 width=120 src="IMAGE LINK" alt="pic name" style="border:none;"/></a></td>
</tr>
</table>
</div>

问题是，如果我在上面的代码中连续放置超过 2 张图片或不减小图片的宽度，则在使用移动设备等小屏幕设备时，图片将无法显示在屏幕上。它在计算机浏览器上运行良好，因为有足够的 space 来容纳图像。

我想在这里做的是，我想连续显示超过 2 张图像，并且在移动设备上，它应该是自动排列的。我的意思是，假设我在上面的代码中放了 6 张图片，在移动设备上，我想连续显示两张图片，下面是接下来的两张图片，依此类推（如图块）。现在，当我使用上面的代码并在移动设备上查看博客时，我只能看到正确显示的第一张图片和第二张图片的一半。第三张图片根本看不到。我希望所有图像具有相同的宽度和高度，如果屏幕没有足够的 space 来在同一行显示图像，它应该自动移动到下一行。我该怎么做？

Answer 1

我假设您使用的 height:width 比率反映了原始图像的比率，因此只指定了宽度。该图像将是其父元素 a 元素的 100%。您可以通过指定 nobrtable 元素的宽度、位置等进一步控制它。

<style type="text/css">
  .nobrtable a   { display: block; float: left; width:50%; max-width:120px; }
  .nobrtable img { border:solid 1px black; float:left; width: 100%; }
</style>
<div class="nobrtable">
  <a href="URL" target="_blank" title="pic1">
    <img src="IMAGE LINK" alt="pic name" />
  </a>
  <a href="URL" target="_blank" title="pic2">
    <img src="IMAGE LINK" alt="pic name" />
  </a>
</div>

根据屏幕大小调整博客图像小部件的大小

resize blogger image widget according to screen size

html

javascript

css

blogger