模糊的屏幕截图

Question

我正在尝试将编码窗口的屏幕截图添加到网站上时，当我使图像较小时，写作变得扭曲和不可读。

有什么方法可以解决吗？关于如何创建屏幕截图或如何显示？

我创建了一个带有随机示例的JSFIDDLE，可以尝试证明我的问题，我希望三个屏幕截图并排合适，但仍然可以清楚且可读。

<img class="screen-example" style="height:200px; width:400px;" src="https://media.licdn.com/mpr/mpr/AAEAAQAAAAAAAAKPAAAAJDA2Y2U1Y2EwLTYzMzItNGM2OS04ZjU3LTQzMTk0MDhkMDk1NA.jpg">

https://jsfiddle.net/ccokdwbv/

Answer 1

这不是您可以做的示例，而是您的图像规模太小而无法阅读。这是一个快速的解释：假设您的屏幕截图最初是1000px宽的，并且具有文字，如果您真的仔细查看屏幕，您可以看到字母大约是8个像素宽。这意味着宽度上有8个小点，以显示" r"或" Z"中的曲折的曲线。考虑一下像素艺术，或尝试使用小瓷砖拼写字母。

现在，当您将图像缩放为宽度时，可以说200px宽，计算机的像素仍然相同，但是现在，您只有8个像素可以传达一个字母，而是只有2个像素 - 结果 - 结果变形。您不能将任何额外的东西塞入像素中，就是这样，只是一个颜色的一个点。

Answer 2

您可以尝试使用bootstrap类使您的映像响应。此外，您可以连续拟合3个图像，您可以使用bootstrap" row"类，并将屏幕分成三列。这样：

<div class="row">
<div class="col-xs-12 col-md-12"><img src=" "/></div>
<div class="col-xs-12 col-md-12"><img src=" "/></div>
<div class="col-xs-12 col-md-12"><img src=" "/></div>
</div>