✔ Darstellung der Bilder bei 1024x768 nicht angepasst

Eisbergsalat666

Eisbergsalat666

Mitglied
Wie kann ich bei einem Bild die width Angabe prozentual zur Bildschirmauflösung angeben?

Das Bild hat eine Breite von 75% der Ursprungsgröße. Wenn ich jedoch meine Auflösung auf 1024x768 ändere, ist das Bild natürlich noch immer 75% der Ursprungsgröße groß...was dann natürlich zu viel ist.

Wie kann ich dem Container sagen das er 75% je nach Auflösung nehmen soll?....ist meine Frage verständlich?

Vielen Dank schonmal
 
Dynamische Anpassung heißt das Schlagwort.
Bei Hintergrundbildern ist das ganze auch kein Problem. Jedoch habe ich irgendwie ein Problem dieses bei Freigestellten realtiv und absolut positionierten img s anzuwenden.

Wie sage ich, dass, egal welche Auflösung vorliegt, auf die Auflösung gemessen, x% des Platzes eingenommen werden soll (egal in welcher Auflösung, dynamisch halt).
Wenn ich width angebe bezieht sich das auf das Bild an sich. Genau wie bei max- oder min-width. Ich versteh nicht wie das funktioniert? Ich hab schon viel gesucht in diversen Foren, aber nichts gefunden was mir geholfen hat.
Wie kann ich das auf die Größe der Auflösung beziehen?
 
So vielleicht
HTML: 
<!doctype html>
<html>
<head>
<title>Bild 75% von der Fenstergröße</title>
<meta charset="UTF-8">

<style>

div {
width:75%;
border:1px solid #000;
float:left;
}

div img {
width:100%;
display:block;
}

</style>
</head>
<body>
<div><img src="bild2.jpg"></div>
</body>
</html>

Alternativ ginge auch das.
HTML: 
<img src="bild2.jpg" width="75%">

Solltest du die Auflösung zu Testzwecken ändern, dann muss du auch den Browser neu starten. Sonst kann es passieren, dass dir das Bild wieder in 100% abgezeigt wird.
 
Zuletzt bearbeitet:
Danke dafür! Prozentangaben im Quellcode sind ja bekanntlich nach W3C nicht gestattet. Ich hab das jetzt so gelöst:
Beispiel:
CSS: 
#loadscreen {
    position: absolute;
    width: 25%;
    right: 0;
    bottom: -1%;
}
#loadscreen .profil {
    width: 100%;
}
HTML: 
<div id="loadscreen">
            <img src="images/portrait2.png" alt="" class="profil" />
        </div>


Aber wie bekomm ich das mit Elementen hin in denen sich keine Bild-, sondern ausschließlich Textelemente befinden?
Ich habe z. B. folgenden HTML-Code
HTML: 
<div class="row banner">
         <div class="banner-text">
               <div class="banner-logo">
                <div class="parallax-container" data-jkit="[parallax:strength=0.1;axis=both]">
                    <div class="parallax parallax3"><img src="images/Wolf_grey.png" alt=""></div>
                    <div class="parallax parallax2"><img src="images/Wolf_lightgrey.png" alt=""></div>
                    <div class="parallax parallax1"><img src="images/Wolf_white.png" alt=""></div>
                </div>
            </div>
            <h3><span>Herzlich willkommen auf der offiziellen Webseite von Wolf !</span><br>
            Hier erfahren Sie alles Wissenswerte zu Ihrem
            <span><a class="smoothscroll" href="#about">Lieblingsstar</a></span>
             – angefangen von
            <span><a class="smoothscroll" href="#music">Musik</a>, <a class="smoothscroll" href="#media">Bildern</a></span>
            und <span><a class="smoothscroll" href="#media">Videos </a></span>
            der letzten
            <span><a class="smoothscroll" href="#shows">Auftritte</a></span>
            , bis hin zu anstehenden
            <span><a class="smoothscroll" href="#shows">Veranstaltungen</a></span>
             finden Sie hier alle Informationen. Des Weiteren können Sie Anmerkungen und Eindrücke im
            <span><a class="smoothscroll" href="#guestbook">Gästebuch</a></span>
             hinterlassen. Somit wünsche ich Ihnen viel Spaß beim Stöbern auf dieser Webseite !
</h3>
mit dazugehöriger CSS
Code: 
header {
   position: relative;
   height: 800px;
   min-height: 500px;
   width: 100%;
   background: #161415 url(../images/header-background.jpg) no-repeat top center;
   background-size: cover !important;
    -webkit-background-size: cover !important;
   text-align: center;
   overflow: hidden;
}

/* vertically center banner section */
header:before {
   content: '';
   display: inline-block;
   vertical-align: middle;
   height: 100%;
}
header .banner {
   display: inline-block;
   vertical-align: middle;
   margin: 0 auto;
   width: 100%; /* von 65*/
   padding-bottom: 30px;s
   text-align: center;
}

header .banner-text { width: 100%; }

header .banner-text h3 {
   font: 18px/1.9em 'librebaskerville-regular', serif;
   color: #1d1d1d;
   margin: 0 auto;
   width: 70%;
   text-shadow: 0px 1px 2px rgba(0, 0, 0, .5);
}

header .banner-text h3 span,
header .banner-text h3 a {
   color: #fff;
}
Wie kann ich den head.banner-text h3 dynamisch an die Bildschirmauflösung anpassen lassen. Mit den Bildern wurde mir schon sehr geholfen.
 
Jo...danke. Werde mir das mal in ruhe durchlesen. Werde ich nur leider erst im neuen Jahr schaffen. Jetzt geht es für mich ersteinmal in eine arbeits- und stressfreie Zeit.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück