albert albert - 2 months ago 16
HTML Question

HTML To Fit an image only in specific resolution

I want to display an image (It can be of any size) only in a table of 1280 x 800 Resolution it will not display on other screens.

Now I'm using an

<img>
element inside the body, and if the image is small, it doesn't fill the screen and if the image is big, it display it out off the screen.

So the html is this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="/libs/qimessaging/1.0/qimessaging.js"></script>
<script type="text/javascript" src="js/senaletica.js"></script>
</head>
<body>
<img id="mapa" alt="mapa" src="">
</body>
</html>


And the javascript:

$('document').ready(function(){

var session = new QiSession();

session.service("ALMemory").done(function (ALMemory) {
ALMemory.subscriber("PepperQiMessaging/totablet").done(function(subscriber) {
subscriber.signal.connect(toTabletHandler);
});
});

function toTabletHandler(value) {
var imgMap = $('#mapa');

imgMap.attr('src', 'data:image/png;base64,' + value);
imgMap.width($('window').width());
imgMap.height($('window').height());
}
});


I don't use any CSS at the moment.

Answer Source

See Below Snippet :

$(document).ready(function(){

    function toTabletHandler(value) {
        var imgMap = $('#mapa');

        imgMap.attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSd8cAJmOsrWimMAMpTAFOPURbw4q7uDKKxau1nimZ4V-usMb0w');
        imgMap.width($(window).width());
        imgMap.height($(window).height());
    }
    toTabletHandler(5);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <img id="mapa" alt="mapa" src="">
  </body>