Question

我正在开发一个页面，用户可以在该页面上载一些图片到我的网站。

用户可以上传的图片应具有特定的尺寸，例如800 x 600像素。

当用户上传其他尺寸时，例如：900 x500。此图像应重新缩放（不成比例）为800 x 600。

现在，我需要页面进行响应。这意味着在调整整个页面的大小时，这次应按比例调整图像区域的大小。

例如，如果页面是原始大小的50％，则图像区域应为400 x 300；

我有以下html

  <div class="ImageRegion">
    <img class="Image" src="whatever"/>
  </div>

这可以仅使用CSS来实现，还是我应该使用Javascript？

干杯

Answer 1

如果我理解正确，您可能可以通过以下方式实现自己想要的东西：

<img src="yourimage.png" class="whatever" />

在CSS中：

img.whatever {
   display: inline-block;
   max-width: 800px;
   width: 100%
}

Answer 2

/* For width smaller than 400px: */

.ImageRegion {
  background-repeat: no-repeat;
  background-image: url('http://placehold.it/400x300');
  width: 400px;
  height: 300px;
}


/* For width 400px and larger: */

@media only screen and (min-width: 400px) {
  .ImageRegion {
    background-repeat: no-repeat;
    background-image: url('http://placehold.it/800x600');
    width: 800px;
    height: 600px;
  }
}

<h3>Resize the browser width and the background image will change at <mark>400px</mark>.</h3>
<div class="ImageRegion"></div>

如何在css中实现？

2 个答案: