Why does Chrome scale my fixed size elements when emulating mobile devices? How to disable this behavior?

I'm trying to build this page so that the content always fills the available width, with the goal of having the dimension relationships always stay the same, very much like an image would.

In that sense I have a couple of breakpoints and the intention is to use the css scaling on the main wrapper linked to javascript code that will watch for screen size or orientation changes and calculate the ratios that will make up the difference.

If you're curious about the details i'm following this article

Html

<div id="scaledElement" class="bg-image-wrapper">
    <div class="text-center logo">
        <img src="/assets/img/notifications/web-logo.svg">
    </div>

    <div class="bg-image-card center-block text-center">
        <img class="tablet-logo center-block" src="/assets/img/notifications/tablet_p-logo.svg">

CSS

.bg-image-wrapper {
    width           : 1440px;
    height          : 900px;
    background-image: url("/assets/img/notifications/unsubscribe-web-bg@2x.png");
    background-size : cover;
    font-family     : "SF Pro Text", sans-serif;
    font-size       : 16px;

    >.logo {
        padding: 44px 15px 42px;
    }

    .bg-image-card {
        background-image: url("/assets/img/notifications/unsubscribe_card-bg@2x.png");
        background-size : cover;
        max-width       : 1080px;
        padding         : 80px;
        border-radius   : 8px;

        .tablet-logo {
            display: none;
        }