HTML/IE: étirer l'image pour l'ajuster, conserver les proportions

Dans une fenêtre HTML, je suis à la définition d'un corps sur mesure

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

pour afficher une image.

Maintenant, je veux strectch l'image pour l'adapter à la fenêtre disponible, mais conserver les proportions.

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

s'étend, mais aussi déforme l'image.

Est-il un HTML la ruse pour le faire?
C'est à dire uniquement la solution est très bien, puisque c'est dans un hébergé broweser de contrôle.

InformationsquelleAutor peterchen | 2009-03-13

html internet-explorer

10

Si vous souhaitez conserver les proportions, vous avez seulement besoin de spécifier une dimension ie:
```
<img src="file://[filename]" width="100%" alt="" />
```
Vous pouvez utiliser javascript pour déterminer la dimension maximale et redimensionner en conséquence
```
<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>
```
- Comment puis-je mettre dans le redimensionner gestionnaire, et hoew dois-je obtenir la taille de la fenêtre?
- J'ai fini par convaincre le gars qui "width="100%"" est "assez bon".
InformationsquelleAutor Philippe
5

Si vous connaissez la hauteur ou de la largeur, vous pouvez définir uniquement que. L'autre dimension sera automatiquement défini en fonction du rapport d'aspect de l'image.
- Cela peut couper l'image dans l'autre axe. par exemple, avoir "width=100%"pour une image avec AR 1:2 dans une AR 1:1 fenêtre, la moitié inférieure est coupée.
InformationsquelleAutor tgecho

Non, vous allez avoir à utiliser Javascript pour cela, et il est plus délicat qu'il n'y paraît. J'ai fait quelque chose de similaire, l'autre semaine, ici;s la fonction que j'ai créé pour elle, vous pourriez être en mesure de ré-approprier

Oh, et il a besoin de 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);


}

InformationsquelleAutor gargantuan

Paramètre width = 100% n'est pas exactement une grande réponse, car elle ne tient pas compte de la hauteur et peut déborder de l'élément dans la direction Y à la fenêtre.

Cette solution redimensionne l'élément une fois sur la charge et également de les redimensionner, de vérifier les proportions de la fenêtre et de déterminer si la hauteur doit être de 100% ou la largeur doit être de 100%. Cela vous permettra de toujours garder la totalité de l'élément dans la fenêtre et agrandie tout en préservant l'aspect ratio.

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();
});

InformationsquelleAutor tommybananas

pur HTML solution: c'est ma technique.

 .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>

DÉMO: http://jsfiddle.net/PBbcF/

Absolument pas universel: il ne peut pas faire de trop haut ou trop larges images ajustement
évidemment, c'est impossible parce que 1 x 2000px ne maison dans cette. Cette solution est pour les images où il est normal que le ratio d'aspect de la différence, pas autant que je l'ai mentionné.

InformationsquelleAutor hfarazm

cette version de @hfarazm code fait une div dans laquelle le pic est en plein vert taille centrée horizontalement, si vous le faites, pleine taille de l'horizontale, il serait centrée verticalement, je pense que c'est la meilleure façon sans l'aide de js (avec tommybananas code, il peut être possible de faire complètement le travail) ou php ou autre chose:
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/

InformationsquelleAutor SupraLP

0

Pur HTML pas.

Ce qui pourrait être fait en JavaScript si vous connaissez le ratio d'aspect de l'image. Ne sais pas si c'est possible via JS, mais vous pouvez passer cette valeur à la JavaScript si vous utilisez une autre langue.

InformationsquelleAutor Ólafur Waage

Vous devez vous connecter pour publier un commentaire.