Das HTML5-Bild-Tag reagiert nicht mit Bootstrap ⇐ HTML

[Anonymous]

Ich versuche, mit dem HTML5-Tag
verschiedene Bilder festzulegen. Ich habe die beiden Bilder in ein Bootstrap-Raster eingefügt, sodass das Bild bis zum Haltepunkt 768px reagiert, wo sich das Bild ändert.

Wenn ich die Bildschirmgröße des Browsers minimiere, sehe ich, dass das Bild nicht reagiert. Wie kann das sein? Der Bootstrap-Code sollte korrekt sein?

Eine Demo ist hier zu sehen.

Der HTML-Code sieht im Code-Snippet nicht gut aus. Deshalb poste ich es hier an:

Code: Select all

[img]http://vouzalis.dk/1024.jpg[/img]


Here is headline 1

Code: Select all

body {
background-color: #f5f5f5;
}
/* Set width between grid elements */
.small-padding.top {
padding-top:10px;
}

.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}

.small-padding.right {
padding-right:5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
text-align: center;
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}

.bottom-left {
position: absolute;

bottom: 8px;
left: 16px;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
}

/* Set full width on columns */
@media (max-width: 768px) {
.img-responsive { /*EDIT*/
width: 100%;
height: auto;
}
.btn-success {
width: fit-content;
}
/* Here you go */
.height-m {
height: 350px;
}

}

@media (max-width: 991px) {
h3 {
font-size: 1.2em;

}
}

Code: Select all

[img]http://vouzalis.dk/1024.jpg[/img]


Here is headline 1