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

如何在css中实现这一点?

  •  -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>
    推荐文章