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＆＃39; R＆＃39;或者在＆＃39; Z＆＃39;中的之字形。想想像素艺术，或尝试使用小瓷砖拼出字母。

现在，当您将图像缩小宽度（例如200px宽）时，您的计算机的像素仍然是相同的大小，但现在不是有8个像素来传达字母，而是只有2个像素 - 如结果图像变形。你不能把任何额外的东西塞进像素中，它只是一个颜色点。

Answer 2

你可以尝试使用bootstrap类来使你的图像响应。也可以连续3个图像，你可以使用bootstrap＆＃34; row＆＃34;将屏幕划分为三列。这样的事情：

<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>

模糊屏幕截图

2 个答案: