0

わかりましたので、コンテナに依存しない、本当にレスポンシブなパーセンテージの画像サイズ変更を探しています。言い換えれば、それ自体のサイズに対して画像のサイズを変更したいのです。

その理由は、ページ上のすべての画像のサイズを動的に変更して、画面サイズを小さくできるようにするためです。

これはCMSソリューションに使用され、ユーザーはHTMLに精通していないと想定されるため、画像をラップしたり、クラス/ IDを追加したりすることはできません.

クラスまたはIDを適用できる特定のいくつかを除いて、ページ上のすべての画像を変更したいと思います。

私は現在使用しています：

img {
  -webkit-transform: scale(0.625) translate(-29%, 0); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.625) translate(-29%, 0); /* FF3.5+ */
      -ms-transform: scale(0.625) translate(-29%, 0); /* IE9 */
       -o-transform: scale(0.625) translate(-29%, 0); /* Opera 10.5+ */
          transform: scale(0.625) translate(-29%, 0);
             /* IE6–IE9 */
             /*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');*/
}

.noScale, .userFeed img, .twitter img, .subLogo {
  -webkit-transform: scale(1) translate(0,0); /* Saf3.1+, Chrome */
     -moz-transform: scale(1) translate(0,0); /* FF3.5+ */
      -ms-transform: scale(1) translate(0,0); /* IE9 */
       -o-transform: scale(1) translate(0,0); /* Opera 10.5+ */
          transform: scale(1) translate(0,0);
            /* IE6–IE9 */
             /*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');*/
}

これはほとんど機能しますが、すべての画像は他のすべてのものから元のサイズであると見なされるため、効果的に元のサイズにパディングされます。これは、サイズが 62% 縮小された場合は大きな問題ではありませんが、縮小が小さくなるにつれて大きな問題になります。また、明らかに、ますます小さい画面サイズに対処するために、メディア クエリのいくつかの実装が必要になります。

翻訳がそこにあるので、画像の左端はまだ画像の左端です。

JS/JQuery ソリューションを検討しますが、最新のブラウザーと互換性のある CSS の方法が本当に必要です。だからie9+。

次のいずれかを提案する前に、私のテストでは機能しませんが、間違っていることが証明されてうれしいです:

max-height/max-width (一部のブラウザではコンテナに合わせてサイズ調整されます) Zoom (完全にはサポートされていません。サポートされていれば完璧です)する）

私が完全に太っていて、これに完全に間違ったアプローチをしている場合は、問題ありません。教えてください。どんな助けでも大歓迎です。

ありがとう

スティーブン

4

1 に答える 1