*.png über HTML eingebunden skaliert nicht

Kurokami

Hallo Freunde,

ich arbeite derzeit immer noch an der Webseite für mein Praktikum...
nun bin ich auf das Problem gestoßen, dass mein PNG das die überschrift bildet nicht skaliert.

Mein Code ist naja, eher was für Leute die mir wirklich helfen wollen, da ich mit einem Framework gearbeitet habe.
HTML

HTML

<!DOCTYPE html>
<html lang="en">


<head>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content=" Kräutermanufaktur Bad Wünnenberg - Maikäfer Flugbenzin">
    <meta name="author" content="Kräutermanufaktur Bad Wünnenberg">


    <title>Maik&auml;fer Flugbenzin</title>
    <!-- Custom Font-->
    <link href='http://fonts.googleapis.com/css?family=UnifrakturMaguntia' rel='stylesheet' type='text/css'>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">


    <!-- Custom CSS -->
    <link href="css/one-page-wonder.css" rel="stylesheet"> 


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>


<body>


    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">Kr&auml;utermanufaktur Bad W&uuml;nnenberg</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#Jump1">Startseite</a>
                    </li>
                    <li>
                        <a href="about.html">&Uuml;ber Uns</a>
                    </li>
                    <li class="dropdown active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Maik&auml;ferflugbenzin<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="Maikaeferflugbenzin.html">Das Produkt</a>
                            </li>
                            <li>
                                <a href="Sprachenauswahl.html">Maik&auml;fergeschichte</a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Unsere Produkte<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="Magenbitter.html">Magenbitter</a>
                            </li>
                            <li>
                                <a href="Aromatisch.html">Aromatisch</a>
                            </li>
                            <li>
                                <a href="Fruchtig.html">Fruchtig</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#Jump3">Kontakt</a>
                    </li>
                    <li>
                        <a href="PartnerPage.html">Partner</a>
                    </li>


                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>


    <!-- Full Width Image Header -->
    <header class="header-image">
        <div class="headline">
            <div class="container">
            <img src="file:///C:/Users/Apotheke/Documents/Gemeinsame Dokumente/Praktikanten Ordner/Hilfen_Webseite/bootstrap-3.3.4-dist/css/assets/images/header.png" alt="">
                <h2>Startseite</h2>
            </div>
        </div>
    </header>


    <!-- Page Content -->
    <div class="container">


        <hr id="Jump1" class="featurette-divider">


        <!-- First Featurette -->
        <div class="featurette" id="about">
            <img class="featurette-image img-circle img-responsive pull-right" src="file:///C:/Users/Apotheke/Documents/Gemeinsame Dokumente/Praktikanten Ordner/Hilfen_Webseite/bootstrap-3.3.4-dist/css/assets/images/kraeuter.png"> <!--http://placehold.it/500x500-->
            <h2 class="featurette-heading">Herzlich Willkommen!<br>
                <span class="text-muted">Stöbern & Entdecken</span>
            </h2>
                    <p class="lead">


                    Hier haben Sie die M&ouml;glichkeit die <a href="Sprachenauswahl.html">Maik&auml;fergeschichte</a> in verschiedenen Sprachen herunterzuladen.<br><br>
                    Bei uns finden Sie ein vielf&auml;ltiges Angebot an Lik&ouml;ren.<br><br>
                    Unsere Produktpalette reicht von Magenbittern über Aromalik&ouml;re bis hin zu Fruchtlik&ouml;ren.<br>
                    <br>
                    <a href="maikaeferflugbenzin.html"><b>Maik&auml;ferflugbenzin:</b></a> Unser Klassiker, welcher sich weltweit gr&ouml;ßter Beliebtheit erfreut. Das spricht f&uuml;r sich und bedarf keiner weiteren Erkl&auml;rung.<br><br>


                    <b>16 heimische Kr&auml;uter</b> verleihen der Geheimrezeptur ihren typischen Geschmack. Die urspr&uuml;ngliche Rezeptur stammt aus einem alten Kr&auml;uterbuch der Benediktiner.<br><br>
                    <b>Probieren auch Sie unseren Lik&ouml;r.</b></p>
        </div>


        <hr id="Jump2" class="featurette-divider">


        <!-- Second Featurette -->
        <div class="featurette" id="services">
            <img class="featurette-image img-circle img-responsive pull-left" src="file:///C:/Users/Apotheke/Documents/Gemeinsame Dokumente/Praktikanten Ordner/Hilfen_Webseite/bootstrap-3.3.4-dist/css/assets/images/sageshop.png">
            <h2 class="featurette-heading">Unsere Produkte<br>
                <span class="text-muted">Lik&ouml;re & Shop</span>
            </h2>
            <a class="lead" href="http://sage-shop.com/epages/Aatal-Apotheke.sf/">zum Shop</a><p class="lead"> &Uuml;ber diesen Link gelangen Sie in unseren Online Shop, in diesem k&ouml;nnen Sie unser Angebot an Lik&ouml;ren erwerben.<br><br>
            <a class="lead" href="Produkte.html">zu den Produkten</a><p class="lead"> &Uuml;ber diesen Link gelangen Sie in ein Portfolio, in diesem k&ouml;nnen Sie unser Angebot an Lik&ouml;ren wahrnehmen.<br><br><b>Viel Spaß beim St&ouml;bern</b></p>
        </div>


        <hr id="Jump3"class="featurette-divider">


        <!-- Third Featurette -->
        <div class="featurette" id="contact">
            <img class="featurette-image img-circle img-responsive pull-right" src="file:///C:/Users/Apotheke/Documents/Gemeinsame Dokumente/Praktikanten Ordner/Hilfen_Webseite/bootstrap-3.3.4-dist/css/assets/images/claus.jpg">
            <h2 class="featurette-heading">Kontakt<br>
                <span class="text-muted">Was darf's sein?</span>
            </h2>
            <p class="lead"><b> Wünnenberger Kräutermanufaktur</b><br>
                    Inh. Christina Schrick e.K<br>
                    Mittelstraße 35<br>
                    33181 Bad Wünnenberg<br>
                    Telefon: +49 (0)2953 / 8003<br>
                    Fax: +49 (0)2953 / 7456<br>
                    Email: <a href="mailto:mail@maikaeferflugbenzin.de?subject=Kontaktanfrage">mail@maikaeferflugbenzin.de</a><br><br><br> 
                    Ansprechpartner: Claus M. Lauhof</p>
        </div>


        <hr id="Jump4" class="featurette-divider">
        <!-- Fourth Featurette -->
        <div class="featurette" id="contact">
            <!--<img class="featurette-image img-circle img-responsive pull-left" src="http://placehold.it/500x500">-->
            <h2 class="featurette-heading">Verlinkungen<br>
                <span class="text-muted">Das war noch nicht alles!</span>
            </h2>
            <p class="lead"><a href="PartnerPage.html">Unsere Partner</a><br><br> <a class="lead" href="Sprachenauswahl.html"> Unsere Maik&auml;fergeschichte </a> </p>
        </div>


        <!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                     <a href="Datenschutz.html"> Datenschutz </a> <a href="Impressum.html" > Impressum </a><p>Copyright &copy; RP 15</p>
                </div>


            </div>
        </footer>


    </div>
    <!-- /.container -->


    <!-- jQuery -->
    <script src="js/jquery.js"></script>


    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>


</body>


</html>

Alles anzeigen

Custom CSS

Code

/*!
 * Start Bootstrap - One Page Wonder HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
 
body {
    margin-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}


.header-image {
    display: block;
    width: 100%;
    text-align: center;
    background: url('file:///C:/Users/Apotheke/Documents/Gemeinsame Dokumente/Praktikanten Ordner/Hilfen_Webseite/bootstrap-3.3.4-dist/css/assets/images/bg.jpg') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
    color: #000;
    background-color: #006E09;
}
.navbar-inverse .navbar-nav > .active > a:hover{
    color:#FFF;
}
.navbar-inverse {
    background-color: rgb(0, 110, 9);
    border-color: rgb(255, 255, 255);
}
.navbar-inverse .navbar-brand {
    color: #000;
}
.navbar-inverse .navbar-nav > li > a {
    color: #000;
}
.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover {
    color: #FFF;
    background-color: transparent;
}


.headline {
    padding: 120px 0;
}


.headline h1 {
    font-family: 'UnifrakturMaguntia';
    font-size: 130px;
    color: green;
    /*background: #c9ffd6;
    background: rgba(201,255,214,0.9);*/
}


.headline h2 {
    font-family: 'UnifrakturMaguntia';
    font-size: 77px;
    color: green;
    /*background: #c9ffd6;
    background: rgba(201,255,214,0.2);*/
}


.featurette-divider {
    margin: 80px 0;
}


.featurette {
    overflow: hidden;
}


.featurette-image.pull-left {
    margin-right: 40px;
}


.featurette-image.pull-right {
    margin-left: 40px;
}


.featurette-heading {
    font-size: 50px;
}


footer {
    margin: 50px 0;
}


@media(max-width:1200px) {
    .headline h1 {
        font-size: 140px;
    }


    .headline h2 {
        font-size: 63px;
    }


    .featurette-divider {
        margin: 50px 0;
    }


    .featurette-image.pull-left {
        margin-right: 20px;
    }


    .featurette-image.pull-right {
        margin-left: 20px;
    }


    .featurette-heading {
        font-size: 35px;
    }
}


@media(max-width:991px) {
    .headline h1 {
        font-size: 105px;
    }


    .headline h2 {
        font-size: 50px;
    }


    .featurette-divider {
        margin: 40px 0;
    }


    .featurette-image {
        max-width: 50%;
    }


    .featurette-image.pull-left {
        margin-right: 10px;
    }


    .featurette-image.pull-right {
        margin-left: 10px;
    }


    .featurette-heading {
        font-size: 30px;
    }
}


@media(max-width:768px) {
    .container {
        margin: 0 15px;
    }


    .featurette-divider {
        margin: 40px 0;
    }


    .featurette-heading {
        font-size: 25px;
    }
}


@media(max-width:668px) {
    .headline h1 {
        font-size: 70px;
    }


    .headline h2 {
        font-size: 32px;
    }


    .featurette-divider {
        margin: 30px 0;
    }
}


@media(max-width:640px) {
    .headline {
        padding: 75px 0 25px 0;
    }


    .headline h1 {
        font-size: 60px;
    }


    .headline h2 {
        font-size: 30px;
    }
}


@media(max-width:375px) {
    .featurette-divider {
        margin: 10px 0;
    }


    .featurette-image {
        max-width: 100%;
    }


    .featurette-image.pull-left {
        margin-right: 0;
        margin-bottom: 10px;
    }


    .featurette-image.pull-right {
        margin-bottom: 10px;
        margin-left: 0;
    }
}

Alles anzeigen

Danke im vorraus

Gruß Kuro

Grevas

5wenn es das hier sein soll:
<img src="file:///C:/Users/Apotheke/Documents/Gemeinsame Dokumente/Praktikanten Ordner/Hilfen_Webseite/bootstrap-3.3.4-dist/css/assets/images/header.png" alt="">

img skaliert nicht per default. Da musst du schon was angeben.
Z.B.

Code

.header-image img { display: block; width: 100%; }

Kurokami

Ja hab ich auch gemerkt, als ich dann erstmal eine "breite" angegeben habe.
Dankeschön für deine Hilfe.

*.png über HTML eingebunden skaliert nicht

Tags

Benutzer online in diesem Thema