Wie kann ich mein Bild proportional skalieren?

Question

Wie kann ich mein Bild so anpassen, wie sie es hier getan haben? website.

Wenn Sie das Bild vergrößern, wo "Radiant Power" steht, wird es nicht größer. Bleibt im Vergleich zu den anderen Elementen auf der Website gleich groß.

Können Sie mir einige Tipps geben, wie man das macht, kann ich nicht die Antwort irgendwo finden.

Hier ist meine Website: site

Es ist auf eine kostenlose Domain ist, so dass es langsam geladen werden. Wie Sie sehen können, habe ich das große Bild gemacht, weil es 100vw ist, so dass es viel einfacher zu handhaben ist ... es bleibt gleich, wenn Sie hineinzoomen. Jetzt möchte ich die kleine Größe ändern, wenn ich heranzoomen und sein Aussehen beibehalten Verhältnis wie diese Website, die ich zeigte.

Hier ist die jsfiddle

Das ist, wie ich das große Bild Resize tat:

$(function() { 
    var scr=screen.width; 
    if($(window).width() > scr){ 
     $("#wall").width(scr + 'px'); 
     $("#content").width(scr + 'px'); 
     $("#body-wrap").width(scr + 'px'); 
     $("header").width(scr + 'px'); 
     $("ul:eq(0)").width(scr + 'px'); 
    } 
    else{ 
     $("#wall").width('100vw'); 
     $("#wall").height('auto'); 
     $("#body-wrap").width('100vw'); 
     $("header").width('100vw'); 
     $("ul:eq(0)").width('100vw'); 

    } 
    $(window).resize(function() { 
     if($(window).width() > scr){ 
      $("#wall").width(scr + 'px'); 
      $("#content").width(scr + 'px'); 
      $("#body-wrap").width(scr + 'px'); 
      $("header").width(scr + 'px'); 
      $("ul:eq(0)").width(scr + 'px'); 
     } 
     else { 
      $("#wall").width('100vw'); 
      $("#wall").height('auto'); 
      $("#body-wrap").width('100vw'); 
      $("header").width('100vw'); 
      $("ul:eq(0)").width('100vw'); 
     } 
    }); 
}); 

Answer 1

Sie nur Bildmaßstab auf Prozent der gesamten Breite/Höhe wie diese machen:
https://jsfiddle.net/bhdpmhgc/1/

#test{ 
 
    width: 10%; 
 
    height: 10%; 
 
}

<img src="https://images.cdn.autocar.co.uk/sites/autocar.co.uk/files/porsche-911-s-gen2-rt-2016-244.jpg" id="test">