0
Ich habe versucht, diese gleiche Methode aus:
https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_image2
Ich sehe, dass, wenn die w3schools, wenn ich es die Größe, auch das Bild mit der Breite und Höhe der Größe wird.HTML Ändern der Größe Problem
In meinem Fall, wenn ich den gleichen Code anpassen. Mein Bild wurde nur oben links abgeschnitten. Nicht das ganze Bild:
Gibt es etwas, was ich verpasst habe?
JsBIN: http://jsbin.com/doyaseyabu/edit?html,css,output
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Page template By Adobe Dreamweaver CC</title>
<link href="AboutPageAssets/styles/aboutPageStyle.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/montserrat:n4:default;source-sans-pro:n2:default.js" type="text/javascript"></script>
<script>
function load() {
var context = document.getElementById('main').getContext("2d");
var img = new Image();
img.src = "http://via.placeholder.com/75x150";
img.onload = function() {
context.drawImage(img, 250, 0);
}
}
</script>
</head>
<body onload="load();">
<!-- Header content -->
<header>
<div class="profileLogo">
<!-- Profile logo. Add a img tag in place of <span>. -->
<p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Name :</span></p>
<p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Attempts :</span></p>
<p class="logoPlaceholder"><!-- <img src="logoImage.png" alt="sample logo"> --><span>Score :</span></p>
</div>
<section>
<div class="wrapper">
<div class="container">
<div class="canvas-container">
<canvas id="main" width="500px" height="250px"></canvas>
</div>
</div>
</div>
</section>
<!-- Links to Social network accounts -->
<aside class="socialNetworkNavBar">
<div style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75" >
</div>
<div id="left" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input type="image" src="http://via.placeholder.com/75x75" > </div>
<div id="down" style="margin-right: 50px;" class="socialNetworkNav">
<!-- Add a Anchor tag with nested img tag here -->
<input id="right" type="image" src="http://via.placeholder.com/75x75" >
</div>
</aside>
</header>
<!-- content -->
</body>
</html>
CSS:
@charset "utf-8";
/* Global Styles */
#main {
width:100%;
background-image:url('http://www.desktopwarehouse.com/wallpapers/christmas-tree-background-852x480.jpg');
}
body {
margin-left: auto;
margin-right: auto;
width: 92%;
max-width: 960px;
padding-left: 2.275%;
padding-right: 2.275%;
}
/* Header */
header {
text-align: center;
display: block;
}
header .profileLogo .logoPlaceholder {
background-color: white;
color:black;
width: 300px;
text-align: center;
}
header .logoPlaceholder span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .logoPlaceholder2 span {
width: 180px;
height: 22px;
font-family: 'Montserrat', sans-serif;
color: black;
font-size: 30px;
font-weight: 700;
line-height: 53px;
}
header .profilePhoto {
background-color: rgba(237,237,237,1.00);
width: 259px;
border-radius: 50%;
height: 259px;
clear: both;
}
header .profileHeader h1 {
font-family: 'Montserrat', sans-serif;
color: rgba(146,146,146,1.00);
font-size: 30px;
font-weight: 700;
line-height: 24px;
}
header .profileHeader h3 {
font-family: sans-serif;
color: rgba(146,146,146,1.00);
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
hr {
background-color: rgba(208,207,207,1.00);
height: 1px;
}
header .profileHeader p {
font-family: sans-serif;
color: rgba(146,146,146,1.00);
font-size: 14px;
font-weight: 400;
line-height: 1.8;
overflow-y: auto;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
}
header .socialNetworkNavBar .socialNetworkNav {
border-radius: 50%;
cursor: pointer;
}
header .socialNetworkNavBar .socialNetworkNav img:hover {
opacity: 0.5;
}
/* Media query for Mobile devices*/
@media only screen and (min-width : 285px) and (max-width : 480px) {
/* Header */
#main {
width:100%;
}
header {
width: 100%;
float: left;
}
.wrapper {
display: inline-block;
width: 100%;
height: 100%;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
text-align: left;
}
header .profilePhoto {
display: inline-block;
}
header .profileHeader {
text-align: center;
margin-top: 10%;
}
header .profileHeader p {
text-align: justify;
}
header .socialNetworkNavBar {
text-align: center;
display: block;
margin-top: 60px;
clear: both;
margin-bottom: 15%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 60px;
height: 60px;
display: inline-block;
margin-right: 23px;
}
}
/* Media Query for Tablets */
@media only screen and (min-width : 481px) and (max-width : 1024px) {
/* Header */
header {
width: 100%;
float: none;
}
header .profileLogo .logoPlaceholder {
display: inline-block;
font-family: 'Montserrat', sans-serif;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
margin-top: 5%;
}
header .profileHeader {
text-align: left;
margin-top: 7%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
}
/* Desktops and laptops */
@media only screen and (min-width:1025px) {
/* Header */
header .profileLogo .logoPlaceholder {
float: left;
margin-bottom: 50px;
}
header .profilePhoto {
float: left;
clear: both;
margin-right: 3%;
}
header .profileHeader {
text-align: left;
padding-top: 10%;
}
header .socialNetworkNavBar .socialNetworkNav {
width: 74px;
height: 74px;
display: inline-block;
margin-right: 23px;
}
.wrapper {
display: table;
padding: 0;
width: 100%;
height: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.canvas-container {
position: relative;
max-width: 1024px;
min-width: 120px;
margin: 0 auto;
}
}
Bild Ausgabe: -
Auf der Webseite: 
Auf Mobil:
@ ℊααnd, für die Hauptklasse 'background-image: url ('http://www.desktopwarehouse.com/wallpapers/christmas-tree-background-852x480.jpg');' – FreedomPride
In Ihrem JS Bin ich sehe kein Problem. Können Sie Ihr Problem genauer erklären? –
@kris_IV, das Problem ist, wenn im Browser das Bild korrekt angezeigt wird, wenn es auf die Größe des Handys passt, sollte es die Größe des gesamten Bildes anpassen, um es anzupassen. Aber in meinem Fall wird die Größe nur bis oben links geändert, wenn das verbleibende Bild fehlt. – FreedomPride