HTML/IE：ストレッチ画像HTMLウィンドウで、アスペクト比

Question

を維持、合わせて、私は画像を表示するカスタムボディ

<img src="file://[filename]"> 

を設定しています。

ここでは、使用可能なウィンドウに合わせてイメージをストレッチしたいが、縦横比は保持したい。

<img src="file://[filename]" width="100%" height="100"> 

また、画像を歪ませます。

これを行うにはいくつかのHTMLトリッキーがありますか？ これはホストされたブラウザコントロールにあるため、IEの唯一の解決策は問題ありません。

Answer 1

あなたは縦横比を維持したい場合は、あなただけのすなわち、1つのディメンションを指定する必要があります。

<img src="file://[filename]" width="100%" alt="" /> 

あなたは最大の寸法を決定し、それに応じて

<script type="text/javascript"> 
function getImgSize(id){ 
var pic = document.getElementById(id); 
var h = pic.offsetHeight; 
var w = pic.offsetWidth; 
alert ('The image size is '+w+'*'+h); 
} 
</script> 

Answer 2

純粋なHTML番号はありません。

イメージのアスペクト比を知っている場合、これはJavaScriptで行うことができます。ただし、JSを介して可能かどうかはわかりませんが、他の言語も使用している場合は、その値をJavaScriptに渡すことができます。

Answer 3

いいえ、これにはJavascriptを使用する必要がありますが、それは聞こえるよりもトリッキーです。私はここで、他の週に似た何かをした。私はそれのために作成した関数をよ、あなたはああ

それを再適切なことができるかもしれない、とあなたがいずれかの高さを知っているなら、それはjQueryの

function resize_background(){ 

    var target = $("#background_image"); 
    var window = $(window); 
    var ratio = 1; 
    var anchor_point = 200; 
    var register_point = 400; 

    if(window.width() > min_width){ 
     ratio = window.width()/min_width; 
     target.css("marginLeft", 0); 
    }else{ 
     // center to screen 
     // For this project, this aint needed. 
     //var left_margin = (window.width()/2) - (min_width/2); 
     //target.css("marginLeft", left_margin); 
    } 

    // now figure out anchor stuff 
    var top = ((register_point * ratio) - anchor_point) * -1; 

    target.width(min_width * ratio); 
    target.height(min_height * ratio); 
    target.css("marginTop", top); 

    $("#trace").text(top); 


} 

Answer 4

を必要としますまたは幅を設定することができます。他のディメンションは、画像の縦横比に基づいて自動的に設定されます。

Answer 5

純粋なHTMLソリューションのサイズを変更するためにJavaScriptを使用することができます。これは私の技術です。

.iCon { 
    height: 267px; 
    width: 520px; 
    background-color: #0F3; 
    overflow: hidden; 
    } 
.iCon img { 
    margin-right: auto; 
    margin-left: auto; 
    height: 350px; 
    text-align: center; 
    display: table-cell; 
    margin-top: -50px; 
    } 

HTML：

<div class="iCon"> 
    <img src="http://media.caranddriver.com/images/13q2/510832/2014-ford-fiesta-16l-sedan-hatchback-first-drive-review-car-and-driver-photo-523592-s-450x274-1.jpg"> 
</div> 

DEMO：それは高さを考慮していないとの要素をオーバーフローする可能性があるためhttp://jsfiddle.net/PBbcF/

Answer 6

設定幅= 100％が正確に偉大な答えではありませんY方向に移動します。

このソリューションは、読み込み時に一度要素のサイズを変更し、ウィンドウの縦横比を確認して高さを100％にするか、幅を100％にするかを決定します。これにより、ウィンドウ内のFULL要素は常に保持され、縦横比を維持しながら最大化されます。

function changeElementSize(){ 
    // Compare your element's aspect ratio with window's aspect ratio 
    // My element was 100w x 80h so mine was 1.25 
    if (window.innerWidth/window.innerHeight > 1.25){ 
     $('#element').css('height','100%'); 
     $('#element').css('width','auto'); 
    } else { 
     $('#element').css('width','100%'); 
     $('#element').css('height','auto'); 
    } 
} 

$(window).resize(function() { 
    changeElementSize(); 
}); 

$(window).load(function() { 
    changeElementSize(); 
}); 

Answer 7

@hfarazmコードのこのバージョンでは、私はjsファイルを使用せずに、その最善の方法を考えて、あなたはそれがフルサイズの水平方向が垂直方向にセンタリングされるだろう作る場合はPICはフルヴェールサイズであるウィッヒでdiv要素は、水平方向の中央ます（tommybananasコードで、完全に動作させることも可能である）、またはPHPまたは何か他のもの： HTML

<div class="centeredImage"> 
    <img src="http://media.caranddriver.com/images/13q2/510832/2014-ford-fiesta-16l-sedan-hatchback-first-drive-review-car-and-driver-photo-523592-s-450x274-1.jpg"> 
</div> 

CSS

.centeredImage { 
    height: 500px; 
    width: 500px; 
    background: rgba(0,0,0,0.0); 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.centeredImage img { 
    margin: auto; 
    width: 500px; 
} 

http://jsfiddle.net/5p0ugfLw/