演示

Question

我们有这张照片

我要尝试执行的操作是刷新或加载时，图片高亮显示200x200的正方形，然后删除其余图片，如下所示：

如果可能的话，最简单的方法是没有javascript吗？

Answer 1

这里是一个如何使用CSS和javascript做到这一点的示例。这将适用于任何高度或宽度窗口，因为它会从元素中收集值。

我已对JavaScript进行了评论，但如果您需要其他内容，请告诉我。

演示

// Load image element
image = document.getElementById("random-window-image");

// Get the height and width of the window
window_width =  document.getElementById("random-window-wrapper").offsetWidth;
window_height =  document.getElementById("random-window-wrapper").offsetHeight;

// Calculate a random left value
temp_left = (image.width - window_width) * Math.random();

// Calculate a random top value
temp_top = (image.height - window_height) * Math.random();

// Apply values to the img
image.style.left = "-" + temp_left + "px";
image.style.top = "-" + temp_top + "px";

#random-window-wrapper {
  width: 200px;
  height: 200px;
  overflow: hidden;
  position: absolute;
}

#random-window-image {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="random-window-wrapper">
  <img id="random-window-image" src="https://placeimg.com/640/480/any">
</div>

Answer 2

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  clip: rect(10px,90px,100px,0px);
}
</style>
</head>
<body>

<img src="https://i.stack.imgur.com/kt5HP.jpg" width="200" height="200">

</body>
</html>

如何随机显示图片的一小部分？

2 个答案:

演示