Verlinkte Bilder in HTML CSS skalieren?

3 Antworten

Das problem ist, das Bild ist zu groß und ich bekomme es nicht verkleinert

Das Bild selbst erst einmal fürs Web optimiert und dem Verwendungszweck entsprechend abspeichern. Da das Bild allen Anschein nach lediglich als Hintergrundgrafik eines Buttons dienst, auch als solchen über CSS festlegen.

<a class="btn-home" href="/">Startseite</a>
a .btn-home {
 width: 260px;
 height: 120px;
 background: url("path/to/image.jpg") center;
 background-size: cover;
 display: block;
 position: fixed;
 right: 0px;
 bottom: 0px;
 z-index: 30;
 padding: 12px 25px;
}

Da ein Anker ein Inline-Element ist, diesem die Eigenschaft display: block zuweist. Über width und height die gewünschte Größe definierst und dein Bild lediglich als Hintergrund zuweist. 

Wenn der Button eine feste Größe hat, auch dessen Hintergrundgrafik in dieser Größe speichern kannst. Dir dann auch das background-size sparen kannst. Kommt halt ganz darauf an, was du genau machen möchtest. 

LG medmonk 

Entferne hier

a .btn-home

das Leerzeichen, dann funktioniert auch der Selektor.

1
@regex9

Entferne hier [...] das Leerzeichen, dann funktioniert auch der Selektor.

Grrh, ist GF zu verdanken. Die Entwickler sollten weniger koksen oder den Weibern aus der Buchhaltung hinterher schauen. 😜 Vielleicht dann auch mal schaffen nen gescheiten Editor zu implementieren. 

Wie dem auch sei, danke für deine Korrektur. Sofern man kein Element innerhalb des Ankers über eine Klasse ansprechen möchte, muss das Leerzeichen natürlich weg. Alternativ auch das vorige selektieren des Ankers streicht. 

LG medmonk 

1

Warum lädts du es denn nicht schon in der benötigten Größe hoch? Ansonsten hilft dir hier CSS und width bzw. max-width weiter.

Wie benutzt du denn height und width? Damit sollte es nämlich gehen.

<a href="Startseite.html"><img src="Bild.png"><height="50"><width="50"></a>

0
@NigeruFaggimus

Also wenn dann so:

<a href="Startseite.html"><img src="Bild.png" height="50" width="50" /></a>

2
@NigeruFaggimus

Gerne, dennoch rate ich dir die Bilder in der Auflösung hochzuladen in der Sie gebraucht werden, spart am Ende einfach Traffic.

0
@TitusPullo

Keine soo gute Idee. Wenn du zB n Bild mit 50% hast und n 1366px Display sieht das 700px Bild gut aus, auf nem 4k Display... naja.

0
@triopasi

Sag das mal Google PageSpeed Insights, ausserdem gibt es dafür auch andere Strategien.

0
@triopasi

Es gibt nicht umsonst diverse Image Replacement Techniken. Davon mal ab, wird das Bild wohl lediglich als Button genutzt. Daher es schon Sinn macht, die Größe anzupassen. 

LG medmonk 

0
@TitusPullo

PageSpeed Insights sagt auch du sollst Komprimierung an schalten (gute Idee) und die Caching-Zeit hochstellen. Mein Problem auf meiner Website: Gerade durch Caching von JS kommen die Änderungen bei vielen Usern erst nach einigen Tagen an..

Und zu den Bildern: Hab schon einige Seiten gesehen mit low-res Bildern - auf nem 4k-Display sieht das mitunter dann halt beschissen aus.

Insights sagt dir wo du was verbessern KANNST, er sagt dir aber nicht wo es sinnvoll ist. Klar 4k Bild für n 100x30 Button ist schelcht, aber 200x200 Bild ist für 50% Viewport auch mies.

0

CSS: Zwei Bilder nebeneinander zentrieren?

Hallo ich habe eine Seite gebastelt möchte zwei Bilder nebeneinder zentriert anordnen. Wie mache ich das?

Code html

<footer>
<img class = "social" src="facebook.png">
<img class = "social" src="twitter.png">
</footer>

Css

img.social {
float: middle;
display: block;
margin: auto;
width: 5%;
height: 5%;
}
...zur Frage

Wie kann ich in HTML einstellen, dass das Bild nach dem Monitor skaliert wird?

Guten Tag,

Ich bringe mir gerade HTML bei und möchte nun, dass das Bild falls es ein Bild mit 4K-Auflösung ist, es auf einem Full HD Monitor trotzdem ohne scrollen zu müssen angezeigt wird. Überlegt habe ich mir dazu die Bildschirmauflösung des Benutzers abzufragen. Im Internet habe ich window.screen.availHeight/Width gefunden. Allerdings weiß ich nicht so ganz genau wie ich diesen Befehl benutzen soll, weil es so wie ich es getan habe falsch ist. Oder gibt es eine leichtere Möglichkeit, das Bild mit dem Monitor skalieren zu lassen?

height="window.screen.availHeight" width="window.screen.availWidth

So habe ich das im HTML-Dokument geschrieben

Mit freundlichen Grüßen

...zur Frage

droht mir eine Anzeige wegen Urheberrecht Verletzung?

ich habe gestern während einer Party ein Bild meines Mathe Lehrers als Sticker für snapchat benutzt und dieses dann gepostet (das Bild habe uch von der Internet Seite meiner Schule) meine Klassenlehrerin hat dieses Bild gescreenshotet und wird es wahrscheinlich dem Lehrer zeigen soll ich mir Sorgen um eine Anzeige machen oder ist es kein Problem da das Bild ja auf der Homepage war

...zur Frage

HTML Code um zwei übereinander liegende Bilder zu Maskieren - Insight gewinnen?

Ciao,

Ich möchte auf meiner Homepage unter meinen Produktbildern zwei Bilder übereinander legen, jeweils eins mit verkleidung und dann eins ohne verkleidung, sodass man einen einblick in das produkt gewinnen kann.

Ich habe meine Homepage mit Jimdo aufgebaut und denke dass ich das dann über ein HTML Widget machen muss oder?

Ich stelle mir das so vor, dass um den Mauszeiger ein keiner kreis gezogen wird, der das Bild mit der verkleidung maskiert und man einen Einblick gewinnt, so als würde man mit einer taschenlampe in einen dunklen raum leuchtet

Wie kann man das Programmieren??

Vielen dank im Voraus

...zur Frage

Dynamische anpassung vom Bild zur Bildschirmgöße?

Ich habe habe bereits einen Javascript code der aber leider nicht ganz funktioniert und zwar geht er so:

window.onresize = function(){

var img = document.getElementById('Bild_id');

img.style.width = "100%";}

Das Problem: Wenn die Seite im Fullscreen aufgerufen wird (also der Browser den Bildschirm komplett ausfüllt) funktioniert es nicht und das Bild wird in der ursprünglichen größe angezeigt. Erst wenn ich das Fenster kleiner und dann wieder größer schiebe, funktioniert es wieder so wie gewollt.

über andere, effizientere, Lösungswege würde ich mich auch freuen ! :)

...zur Frage

JavaScript Canvas Bilder werden Komisch angezeigt, Löung?

Hallo,

ich bastele gerade mit dem HTML5 Canvas herum und möchte dort mit JavaScript ein Bild anzeigen, dies Funktioniert auch allerdings werden sie sehr komisch angezeigt, meist zu groß oder verschwommen hier der JavaScript code:

"function drawImage(url) {

var img = new Image();

img.onload = function () {

ctx.drawImage(img,10, 10, 35, 35);

}

img.src = url

}"

hier habe ich schon mit den drawImage Parametern rumgespielt um es anzupassen allerdings kam kein gutes Ergebnis heraus...

Hier noch die canvas daten: width: 900px; height: 700px;

diese habe ich mit CSS angegeben.

Schonmal vielendank für eure Hilfe!

...zur Frage

Was möchtest Du wissen?