1

メディアクエリを使用して、Webサイトのテキストとレイアウト（マージン、パディングなど）をレスポンシブにします。

「ブラウザウィンドウが1300px未満の場合」に設定し、すべてのメジャーを80％に変更します。これはすべて正常に機能しますが、私の画像は応答しません。jqueryを使用して画像に同様の設定を行い、画像の幅をフルサイズの80％にする方法はありますか（拡大縮小されたページの残りの部分に比例しますか？） ）。

使用しているメディアクエリは次のとおりです。

@media only screen 
  and (max-width : 1300px) {
    /* new css */
  }
4

4 に答える 4

2

img画面幅が以下の場合、以下は要素を80％にスケーリングします1300px。

if ($(window).outerWidth() < 1300) {
    $('img').each(function(){
        $(this).width ( $(this).width () * 0.8) );
        $(this).height( $(this).height() * 0.8) );
    });
}
于 2013-03-15T17:55:26.720 に答える
2

画像の幅がCSSではなく属性によって定義されているのは残念です:(

本質的にCSS\designに関連するものにJSソリューションを使用することは、私には間違っているように感じます。純粋な CSS ソリューションを使用するのはどうですか? ここにいくつかのアイデアがあります：

方法 1

ハードコードされた画像属性をハードコードされた画像 css でオーバーライドします。jsfiddle

@media only screen 
  and (max-width : 1300px) {

    img.pasta{
        width: 250px;
        height: 300px;
    }

    img.pizza{
        width: 450px;
        height: 200px;
    }

  }

方法 2

css を使用して、画像をコンテナーのサイズに拡張します。これにより、アスペクト比を維持しながら画像が拡大されます

img{
    max-width: 100%;
    max-height: 100%;
}


@media only screen 
  and (max-width : 1300px) {

    .image_container{
        /* lets say that 300px is the "80%" of normal size */
        width: 300px;
     }

  }

方法 3

創造性を発揮し、幅や高さを変えずに CSS 変換を使用して画像を縮小します

@media only screen 
  and (max-width : 1300px) {
    img{
        -webkit-transform: scale(0.8);  /* Saf3.1+, Chrome */
        -moz-transform: scale(0.8);  /* FF3.5+ */
        -ms-transform: scale(0.8);  /* IE9 */
        -o-transform: scale(0.8);  /* Opera 10.5+ */
         transform: scale(0.8);
    }
  }
于 2013-03-16T09:50:35.487 に答える
2

これはアーロンの答えに似ていますが、ウィンドウのサイズに比例するため、何か違うことを達成していると思いますが、常にフルサイズの80％であるとは限りません.

if ($(window).outerWidth() < 1300) {
  $('img').css('width', '80%');
}
于 2013-03-15T18:19:47.257 に答える
0

私はしばらくこれで遊んでいて、メディアクエリとcssを使用して代替案を見つけました-jsを使用しimg {max-width: 100%;}ていません.. jsfiddleについてはこちらをご覧ください- http://jsfiddle.net/qEf5J/

于 2013-03-15T23:27:58.087 に答える