Jak stworzyć stronę z responsywną grafiką?

pytanie zadane 20 grudnia 2015 w HTML i CSS przez Bakr Mądrala (6,850 p.)

Witam,

W jaki sposób zrobić stronę z responsywną grafiką?

Mam przygotowaną grafikę w HTML wraz z mapą odsyłaczy, jak również plik CSS, gdzie zdefiniowałem zachowanie dla różnych rozdzielczości ekranu.

Treść pliku HTML:

 <!DOCTYPE HTML>
 <html lang="pl">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1">
 <title>Michał Wojciechowski</title>
 <link rel="stylesheet"
href="/css/style.css">
 </head>
 <body>
 
<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">

 <img id="map" src="1.png" alt="Mapa
Odsyłaczy" usemap="#mapa" data-original="1.png"
/> <map id="mapa" name="mapa">
 <area coords="734,23,941,23,949,209,743,210"
shape="poly" href="podstrona1.html"
data-image="2.png" />
 <area coords="703,155,711,371,476,362,485,167"
shape="poly" href="#" data-image="3.png"
/>
 <area coords="680,433,688,634,490,635,477,439"
shape="poly" href="#" data-image="4.png"
/>
 <area coords="866,631,891,821,669,829,676,645"
shape="poly" href="#" data-image="5.png"
/>
 <area coords="483,889,481,997,372,995,374,895"
shape="poly" href="#" data-image="6.png"
/>
 </map>
 
<script>
    (function(){
        var elements = document.getElementsByTagName('area'),
            length = elements.length,
            map = document.getElementById('map');
        for (var i = 0; i < length; ++i) {
            elements[i].addEventListener('mouseenter',
function(){
                map.src = this.getAttribute('data-image');
            });
            elements[i].addEventListener('mouseleave',
function(){
                map.src = map.getAttribute('data-original');
            })
        }
    })();
    </script>
</div>
 
<!-- footer -->
<footer>
<style type="text/css">
a {
color: white;
text-decoration: none;
}
</style>
<p><p style="text-align: center;">&#169;
Powered by <a href="mailto:bartlomiej.krakowski@interia.eu">Bartłomiej
Krakowski</a></p></p>
</footer>
 
</div>
<script src="http://skryptcookies.pl/cookie.js"></script>;
 
</body>
</html>

Treść pliku CSS

* {padding:0;margin:0;}

html {width:100%;height:100%;}
body {font-family:Arial, Helvetica, Sans-serif;font-size:14px;line-height:1.5;font-weight:400;color:#434343;background:#FFF;}

.container {margin:100 auto;}

header {margin:px 0;}
header img {width:100%;}

#main {float:right;margin:0 0 -6px;}

footer {clear:both;color:#FFF;background:#050f11;padding:10px 0 10px 10px;margin:0 0 0px;}


media (min-width: 1100px) {
    .container {width:1050px;}
    img.responsive-img-100 {
max-width: 60%;
height: auto; }
}
@media (max-width: 1100px) and (min-width: 1000px) {
    .container {width:950px;}
    aside {width:30%;}
    #main {width:65%;}
}
@media (max-width: 1000px) and (min-width: 800px) {
    .container {width:750px;}
    aside {width:30%;}
    #main {width:65%;}
}
@media (max-width: 800px) and (min-width: 500px) {
    .container {width:450px;}
    aside,
    #main {width:100%;}
}
@media (max-width: 500px) {
    .container {width:90%;}
    aside,
    #main {width:100%;}
}

Efekty na stronie: www.michal-woj.cba.pl

Problem polega na tym, że w mniejszej rozdzielczości grafika się "ucina" i nie widać jej w całości. Chciałbym, aby wyglądała ona tak samo na każdej rozdzielczości.

3 odpowiedzi

odpowiedź 20 grudnia 2015 przez karix-IT Użytkownik (520 p.)

odpowiedź 20 grudnia 2015 przez Eimens Maniak (69,240 p.)

odpowiedź 20 grudnia 2015 przez Bakr Mądrala (6,850 p.)

Czy ten plik CSS wygląda już w porządku?

* {padding:0;margin:0;}
 
html {width:100%;height:100%;}
body {font-family:Arial, Helvetica, Sans-serif;font-size:14px;line-height:1.5;font-weight:400;color:#434343;background:#FFF;}
 
.container {margin:100 auto;}
 
header {margin:px 0;}
header img {width:100%;}
 
#main {float:right;margin:0 0 -6px;}
 
footer {clear:both;color:#FFF;background:#050f11;padding:10px 0 10px 10px;margin:0 0 0px;}
 
 
media (min-width: 1100px) {
    .container {width:1050px;}
    img.responsive-img-100 {
max-width: 100%;
height: auto; }
}

@media (max-width: 1100px) and (min-width: 1000px) {
    .container {
width:100%;
height:auto;
}
    aside {width:100%;}
    #main {width:100%;}
}

@media (max-width: 1000px) and (min-width: 800px) {
    .container {
width:100%;
height:auto;
}
    aside {width:100%;}
    #main {width:100%;}
}
@media (max-width: 800px) and (min-width: 500px) {
    .container {
width:100%;
height:auto;
}
    aside,
    #main {width:100%;}
}
@media (max-width: 500px) {
    .container {
width:100%;
height:auto;
}
    aside,
    #main {width:100%;}
}