2017-01-09 4 views
1

大きな画像をウィンドウに合わせて拡大するページを作成しましたが、画像が読み込まれてサイズに合わせて拡大することはできません。私は最初のビューのサイズを以下に示すようにCSSで実現したいと思っていますが、その後、ユーザはCtrl + のようにズーム(またはモバイル/タッチスクリーンデバイスでピンチズーム)できるようにします0を使用して、最初のビューのサイズに戻ります。どうすればこれを達成できますか?完全なコードは次のとおりです。CSS:位置は固定されているが、ユーザーのズームを許可する画像を表示する

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    img { 
     position: fixed; 
     max-width: 100%; 
     max-height: 100%; 
     top:0; 
     left:0; 
     bottom:0; 
     right:0; 
     margin: auto; 
    } 
    </style> 
</head> 
<body> 
    <img src="LARGE_IMAGE.jpg"> 
</body> 
</html> 
+0

@happymacartsあなたは 'scale();'を意味しますか? 'zoom'は古いIEスタイルです。 –

+0

@Tomなぜ画像に直接リンクしないのですか?ブラウザはデフォルトでそれを拡大/縮小し、タップしたりピンチしたりすると、フルサイズで拡大表示されます。 –

+0

@MichaelCoker画像を右クリックするのを無効にする予定で、画像がHTMLマークアップ内でスタイルされている場合にのみ可能です。 – Tom

答えて

0

ビューポートで幅を作る必要があります。とにかくデバイスの幅は変更されません。

関連する問題