Ergebnis 1 bis 3 von 3

Thema: *.png über HTML eingebunden skaliert nicht

  1. #1
    Teeny
    Registriert seit
    02.06.2015
    Beiträge
    21
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard *.png über HTML eingebunden skaliert nicht

    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.
    Skaliert_Nicht.jpg

    Mein Code ist naja, eher was für Leute die mir wirklich helfen wollen, da ich mit einem Framework gearbeitet habe.
    HTML
    Code:
    <!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>
    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;
        }
    }
    Danke im vorraus

    Gruß Kuro
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: *.png über HTML eingebunden skaliert nicht

    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%; }

  3. Folgende User finden die Antwort von Grevas gut:


  4. #3
    Teeny
    Themenstarter

    Registriert seit
    02.06.2015
    Beiträge
    21
    Danke
    5
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: *.png über HTML eingebunden skaliert nicht

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

Ähnliche Themen

  1. div höhe skaliert nicht mit wenn inhalt absolut
    Von gertnaster im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 11.06.2013, 14:54
  2. Php-Skript in html eingebunden. Zwei Probleme
    Von Area51sbk im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 13.06.2007, 20:03
  3. plone2pdf 0.3.7 - Bilder werden nicht eingebunden
    Von im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 1
    Letzter Beitrag: 13.06.2007, 17:09
  4. Antworten: 0
    Letzter Beitrag: 16.05.2007, 17:08
  5. IE skaliert Bilder nicht runter
    Von H3PO im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 0
    Letzter Beitrag: 22.12.2005, 16:47

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •