13

HTMLで使用してみました：

<img src="../Resources/title.png" />

CSSの場合：

img {
  width: 200%;
  height: 200%;
}

ただし、これは画像が含まれている親タグに基づいて画像を拡大縮小します。画像が150px x 150pxの場合、300pxx300pxに拡大縮小します。サイズや親タグに関係なく、すべての画像でこれが機能するようにしたいと思います。そして、CSSだけを使いたいです。アイデア？

4

5 に答える 5

11

scale()これは2D変換で行うことができますが、派手な新しいCSS3機能のサポートの1つであるため、現時点では不完全であり、ベンダープレフィックスが必要です。

img {
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    -webkit-transform: scale(2);
    transform: scale(2);
}

ただし、変換は個々の要素に対して行われ、レイアウトには影響しないため、これがコンテンツのフローを考慮に入れているとは思いません。transform-originプロパティも参照してください。

優れたブラウザサポートが必要な場合、またはコンテンツを適切にリフローする必要がある場合は、JavaScriptを使用したり、HTMLを再構築したりしてwidth、heightプロパティが正しくスケーリングされ、要素フローに影響を与えるようにする必要があります。自然な方法。

于 2012-04-18T20:49:45.903 に答える
8

CSS<バージョン3のみを使用することはできません。

要素に幅/高さを設定すると、そのコンテナを基準にします。

この回答が投稿されてからかなり時間が経っているので、更新してください。

コメント投稿者が指摘しているように、これはzoomCSSプロパティを使用するだけで実現できます。ただし、IE6 / 7日で最初にIEによってのみ実装され、W3C標準に正式化されることはなかったため、お勧めしません。代わりに、今日一般的に使用されているのは、関数を使用したCSS変換です。scale

scale()CSS関数 の詳細： https ：//developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

例： https ：//jsfiddle.net/2n5zLhz3/

于 2012-04-18T20:45:38.130 に答える
3

画像をdivで囲み、親を基準にしたサイズを設定できます。

<style type="text/css">
.double{
  display: inline-block;
}

.double img{
  width: 200%;
}
</style>
<div class="double"><img src="../Resources/title.png"></div>
于 2014-07-30T13:57:26.693 に答える
0

ウィンドウサイズから必要な割合を取得することで、画像を2倍にすることができます。

p > img {
  width:100%;
  height:60vh;
}

"高さ：100vh;" ブラウジングウィンドウから100％を意味します。計算を行う必要があります。

于 2016-09-06T10:23:30.547 に答える
0

画像のmin-widthプロパティを使用して、幅を親のdivよりも大きくすることができます。

.parent {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
img {
  min-width: 200%;
  /* center image */
  margin-left: -50%;
  height: auto;
}
<div class="parent">
  <img src="https://upload.wikimedia.org/wikipedia/commons/b/bc/Information_example_page_300px.jpg" alt=""/>
</div>

于 2019-02-18T23:17:16.647 に答える