-1
検索の時間がたってから、ここでJavaScriptを少し見つけて調整しました。http://generationsinc.co.uk/test/java.htmlこれは画像を操作しています。javascriptイメージのサイズを変更して、divを補完するためにクロップします
<html>
<head>
<title>test</title>
<script type="text/javascript">
function resizeImage()
{
var window_height = document.body.clientHeight
var window_width = document.body.clientWidth
var image_width = document.images[0].width
var image_height = document.images[0].height
var height_ratio = image_height/window_height
var width_ratio = image_width/window_width
if (height_ratio > width_ratio)
{
document.images[0].style.width = "100%"
document.images[0].style.height = "auto"
}
else
{
document.images[0].style.width = "auto"
document.images[0].style.height = "100%"
}
}
</script>
</head>
<body onresize="resizeImage()">
<img onload="resizeImage()" src="f/a.jpg">
</body>
</html>
divで同じように動作させることはできますか？つまり、divの内容を完全に埋めて、画像の縦横比を維持しながら、画像をできるだけ小さくしますか？ （div自体はウィンドウのサイズのパーセンテージとして高さと幅が調整されます）
おかげで（JavaScriptの/結果の境界線の端をドラッグしてください） - の違いは、下部の空白apperarsあなたは上記と同じにしてみてください...側面をドラッグすると、ということです画像はサイズ変更されていて、塗りつぶしているスペースが埋まっています。 – Wellie
申し訳ありません - 説明するのはあまり簡単ではありません - 試してみて、私は何を私は知っている。 – Wellie
さて、画像のアスペクト比を維持したかったとおっしゃいました。この解決法は、画像を最大の可能な領域に塗りつぶし、アスペクト比を維持します。 – aurbano