在这种情况下是否可以动态加载正确尺寸的图像？

Question

我有三个div连续显示，共同填充100％的宽度。每个div都包含一张图片和图片下方的一些文本。

如果浏览器的宽度不足以显示三行，则最后一个div会移动到前两个div的下方，并且宽度会变大，因此两个div以及现在位于其下方的div仍占100％宽度。

div中显示的图像有两种不同的大小（在名为/ thumbs和/ largephotos的文件夹中）。

最初，我从/ thumbs加载了所有图像，但是如果第三个div下降到第二行，变得更大，则图像明显像素化。因此，对于第三个div，我从/ largephotos文件夹中拉出图像，以防万一它恰好显示为大尺寸。

在许多情况下，这显然会不必要地降低页面速度。我希望每次都能显示正确尺寸的图像。

正在从数据库中检索图像，该循环重复3次（检索最近的3张图像）。我已经尝试过各种使用CSS介质宽度的方法，但是似乎找不到解决方法。

    .wrapper {
        padding: 0px;
        max-width: 960px;
        width: 100%;
        margin: 0px auto;
    }
    .columns {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        margin: 0px 0;
    }
    .column {
        flex: 1;
        border: 0px solid gray;
        margin: 0px;
    }
    ...........
    echo "<div class=\"wrapper\">";
    echo "<section class=\"columns\">";
    while ($row = mysqli_fetch_array($result, MYSQLI_BOTH)) {
        echo "<div class=\"column\"";
        ......
        if ($PhotosDisplayed < 2) {
           echo "<img class=\"featuredimage\" src=\"thumbs/";
          }
        else {
          echo "<img class=\"featuredimage\" src=\"largephotos/";
          }
        echo $row['Filename'];
        echo ".jpg\" ";
        ......
        $PhotosDisplayed++;
    }

上面的代码可以完美地工作，但是它总是为第三格加载大照片（因为$ PhotosDisplayed = 3）。但是，如果浏览器的宽度足以使三个div排成一排，我想显示小照片。