代码之家 › 专栏 › 技术社区 › Thomas Carlton

如何在css中实现这一点?

image css html

-2

Thomas Carlton · 技术社区 · 7 年前

我正在开发一个页面,用户可以在我的网站上传一些图片。

用户可以上传的图片应该有一个特定的大小,比如说:800 x 600像素。

当用户上传不同大小的文件时,例如:900 x 500。此图像应重新缩放(不是按比例)为800 x 600。

现在我需要网页的回应。这意味着当整个页面被调整大小时,图像区域应该按比例按比例调整。

例如,如果页面为原始大小的50%,则图像区域应为400 x 300;

我有下面的html

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

这只能用css实现吗?还是我应该用javascript?

干杯,

2 回复 | 直到 7 年前

1

0

ZER0 7 年前

如果我理解正确的话,你也许可以通过这样的方式实现你想要的:

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

在css中:

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

2

0

Penny Liu 7 年前

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