CSS Bild zuschneiden?

Hallo

Ich möchte eine Slideshow mit Js machen (Habe ich schon gemacht) Nun habe ich Bilder mit einer grösse. Die Höhe ist gegeben: 450px. Die Weite soll dem Browserfenster angepasst werden. Von den Bildern ist jeweils das in der Mitte wichtig. also muss ich das bild noch irgendwie zentrieren.

Kann man das?

2 Antworten

AlexXxej

30.04.2018, 23:26

Wenn das eltern-element der img die Maße 450px x 100% sollte das hier ggf. reichen:

object-fit:cover;

https://www.w3schools.com/css/css3_object-fit.asp

AlexXxej

01.05.2018, 12:46

gerne

Svenwas3f

Beitragsersteller

01.05.2018, 06:48

Ja genau das habe ich gesucht Danke

iTg33k

30.04.2018, 22:06

Also horizontal mit text-align:center; .. falls du es noch vertikal zentrieren willst, meld dich nochmal.

Ähnliche Beiträge

Wie zentriere ich mit CSS ganz einfach ein Bild in die Mitte (finde die Beispiele im Internet wurden etwas komplexer gemacht)?

...zum Beitrag

HTML und CSS: Text im Button zentrieren?

Auf dem Bild ist ein Bild der Buttons, HTML und meiner CSS Datei.

Ich möchte jetzt den Text in den Buttons, also "Youtube" und "Spotify", zentriert und etwas größer ist.

...zum Beitrag

CSS/HTML h1 komplett in die Mitte des Dokuments zentrieren?

Weiß jemand wie ich bei meinem HTML Dokument meine Überschrift so wie bei dem Bild in die Mitte bekomme? Habe bei vielen Seiten gesucht, unter anderem auch bei w3school, hab aber nicht wirklich etwas gefunden. Wäre cool, wenn sich jemand bei so etwas auskennt :3

...zum Beitrag

Kreis koordinaten berechnen?

Ich lerne Grade html css und JS und habe einen Kreis aus bildern gemacht.

Dazu hab ich ein Koordinaten-system gezeichnet mir die rechte und obere Zahl markiert und mit einem Zirkel verbunden. Das muss doch leichter geht?!?!? Wie berechnet man das?

Css für Leute die es nicht kennen:

Alles ist in der Mitte angeordnet und kann mit Hilfe von "top" "left" und die anderen bewegt werden. Es fängt unten links an also bei top: -5 geht es fünf hoch und bei left: 6 geht es 6 nach rechts.

...zum Beitrag

HTML / CSS: Wie kann ich einen Text horizontal zentrieren?

Wie kann ich einen Text in die Mitte bringen?

So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      body {
        background-image: url("bild.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center center;
        overflow: hidden;
      }

      h1 {
        color: white;
        font-family: Geneva, Verdana, sans-serif;
        font-size: 200px;
        text-align: center;
        /*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
        padding-top: 38vh;       
        padding-bottom: 70vh;
      }

      h1 {
        /*animation-name: titel;
        animation-duration: 6s;
        animation-delay: 6s;
        animation-fill-mode: forwards;*/
        animation: titel 6s 6s forwards
      }

      @keyframes titel {
        from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
        to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
      }

      p {
        color: aliceblue
      }
    </style>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>TITEL</h1>
    <p>Test-Text</p>
  </body>
</html>

...zum Beitrag

Button mittig unter Bild Zentrieren HTML/CSS?

Hallo erstmal, ich bin komplett neu hier also bitte entschuldigt, falls ich irgendwas nicht richtig beachte. Zu meiner Frage: Ich möchte für eine Portfolio Site Vorschaubilder einer Gallery haben und darunter einen Zentrierten Button für den Link zu der jeweiligen Seite. Mein Problem ist jetzt, dass der Button sich leider nicht zentrieren lässt sondern immer links gebunden ist.

Mein HTML Code:

<section id="content">
<div>
<div id="studio"> 
<img src="img/Gallery_Preview/Studio.jpg" alt="Studio Aufnahmen">
<p><a class="button1" href="Studio.html">Studio</a></p>
</div>
</div>
</section>

Mein Css Code:

#studio {
margin: 30px ;
padding:4px;

}
#studio img {
width: 23%;
height: auto;
}
.button1 {
text-align: center;
width: 100%; 
}

P.s. ich bin Anfänger

Danke schon mal

...zum Beitrag

Bild an Div Container anpassen?

Das Bild ist erstmal nur Platzhalter, da kommt später noch ein Timer rein (aber erst mit JavaScript). Nun soll das Bild aber halt in der Mitte des Bildes auf einer bestimmten Höhe sein. Ich hab bis jetzt mit Padding gearbeitet, aber da der Container je nach der Größe der Seite (das ganze soll halbwegs responsive sein) immer größer als das Bild ist, haut das mit dem Padding da nicht komplett hin. Da ich allerding auch das Prinzip mit dem zentrieren eines divs mit 2 weiteren Containern überhaupt nicht kann, ist mein Ansatz jetzt, dass sich das Bild immer dem Container anpasst in dem es ist. Darüber ist bereits so eine 3er Reihe mit Containern, aber da hat mir ein Freund geholfen, der gerade nicht da ist. Wenn ihr wollt, setze ich dann noch n Bild ran, wo ihr euch das nochmal genau ansehen könnt, ansonsten hier die betreffenden Code-Zeilen:

HTML:

</div>

CSS:

.Timer-container {

display: block;

padding-top: 10%;

padding-left: 25%;

padding-right: 25%;

padding-bottom: 30%;

}

Ich hoffe ihr könnt mir helfen!

Eure Amy

...zum Beitrag

Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?

Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.

Der Code für meine HTML:

<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>

Der Code für CSS:

html {
  height: 100%;
}
body {
 background-image: url("Bilder/getraenkeguenther.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 min-height: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
}
footer {
  margin-top: auto;
  height: 200px;
  text-align: center;
background-color: deepskyblue;
}

Der Code der JS:

var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;

Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke

...zum Beitrag

Wie kann ich die Elemente im Footer zentrieren in CSS?

Ich habe mehrere Links im Footer, welche in CSS mit einem Flex also (Display: flex, flex-Wrap: Warp) hintereinander in einer Zeile stehen.

jedoch sind diese linksbündig & wollen nicht in die Mitte gehen.

ich habe es schon über den Footer mit Text-align probiert und auch schon über die <p>‘s in denen die Links stehen... klappt leider alles nicht.

...zum Beitrag

Html css Zentrieren?

Moin, ich habe in html 4 Bilder. Darunter will ich jeweils einen Block mit Text

Wie man sieht ist ganz rechts der Block direkt unter dem Bild, das habe ich mit margin gemacht. Bei den anderen Blöcken klappt dies nur nicht mehr. Die Bilder und Blöcke sind in keinem Container oder keiner div soweit ich weiß

Danke

...zum Beitrag

Css Bilder mittig und trotzdem nebeneinadner?

Hallo zusammen,
ich habe mehrere Bilder Nebeneinader platziert.

Diese werden im Moment am linken Bildschirmrand dargestellt. Es soll aber so sein, dass die nebeneinander auf allen Bildschirmen mittig dargestellt werden.

Ich habe die Bilder schon in ein Tabelle Zelle und diese Versucht zu zentrieren aber ohne Erfolg.

...zum Beitrag

Wie kann ich ein Bild verkleinern und verschieben (Html, css)?

Ich programmiere eine Website. Und ich muss ein bild in der Mitte, oben platzieren.

...zum Beitrag

HTML/CASS: Mehrere Bilder übereinander ohne Position:Absolute?

Ich programmiere gerade eine Reponsive Webseite. Auf der habe ich eine JS Slideshow für die ich 2 Bilder übereinander legen musste. Das habe ich ursprünglich mit position:absolute gemacht. Dadurch dass ich die Webseite nun mit CSS3 auf Reponsiv getrimmt habe ist das allerdings nicht mehr möglich, da das Bild sonst bei einem skalieren der Webseite über den anderen Inhalt geschoben wird und das min-width der div's nicht beachtet. Meine Frage lautet also, wie ich ohne den Gebraucht von position:absolute mehrere Bilder übereinander legen kann, so das ich die Slideshow auch reponsiv anpassen kann.

...zum Beitrag

Wie würdet ihr es in HTML schreiben und später mit CSS stylen?

Hallo Leute.

Ich wollte den Header mit einem Bild in der Mitte zentriert und zwei Links, jeweils links und rechts darstellen.

Die Darstellung die ich wollte, habe ich hinbekommen.

(Es geht nur um die Positionierung der Elemente, und nicht um Farben, oder ob man die Links nicht im Header, sondern wo Anders positionieren sollte. Es geht explizit um diese Darstellung im Header-Breich.)

Bild 1(Browser): >>>>>>>>>>

Bild 2(HTML): >>>>>>>>>>

Bild 3(CSS): >>>>>>>>>>

Meine Frage wäre: Wie würdet ihr denn die HTML schreiben und anschließend mit CSS stylen, um so ein Ergebnis zu erreichen.

Ich bin mir ziemlich sicher, dass meine Variante nicht die übliche Variante ist, die ein erfahrener in diesem Bereich bevorzugen würde.

Danke.

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen