0

次のcssを使用して、1回のリクエストで多くの画像を表示します

div.image1{
   backgroud:url(image.png) -100px -2px no-repeat;
   width:80px;
   height:60px
}

しかし、私のWebサイトをさまざまなモニター解像度に対応させるために、サイズを変更する必要があるかもしれませんが、幅と高さを変更すると、画像の見栄えが悪くなり、フル解像度ではなくなります。

@media only screen and (max-width: 880px){
   div.image1{
       width:60px;
       height:44px
    }
}

これで、画面が880px未満の場合、完全な画像ではなく、60x44の解像度の画像のみが表示されます。

<img />幅と高さを変えても見栄えが良くない通常のタグのようにするにはどうすればよいですか？

4

2 に答える 2

1

私が読んだこの記事を見て、img { max-width: 100%; }あなたが追加する必要があるのはそれだけだと思います。また、画像を選択することもできます<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

于 2013-01-04T13:18:37.207 に答える
0

メディアクエリと組み合わせて次のプロパティを試してください。

.image {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 80px;
  height: 60px;
}

.image1 {
  background-image: url('https://c1.staticflickr.com/8/7405/26324518664_0d4e70e511_n.jpg');
}

.image2 {
  background-image: url('http://c2.staticflickr.com/8/7149/26855282121_fb57a99f0c_n.jpg');
}

@media only screen and (max-width: 880px){
  .image {
    width: 60px;
    height: 40px
  }
  .image1 {
    background-image: url('https://c1.staticflickr.com/8/7405/26324518664_0d4e70e511_s.jpg');
  }
  .image2 {
    background-image: url('http://c2.staticflickr.com/8/7149/26855282121_fb57a99f0c_s.jpg');
  }
}

https://jsfiddle.net/alexndreazevedo/1umatrtz/

于 2016-05-11T15:16:34.730 に答える