nebeneinander - html text unter bild




Negativer Rand auf einem Bild mit einer Breite von 100% in CSS (4)

Sie haben Ihre eigene Frage beantwortet. Entfernen Sie das Padding und legen Sie es auf den untergeordneten Elementen fest. (oder verwenden Sie Marge auf die Kind-Elemente, wie das ist, was Ihr nach wirklich) Es ist die beste Lösung.

Alternativen: Sie können Positionierung auf dem Bild wie Position: absolut verwenden; Dadurch wird es aus dem Fluss des übergeordneten Elements entfernt und ignoriert daher das Padding. Sie müssten jedoch genau wissen, wohin das Bild gehen soll. Option 1 ist viel besser.

Ich habe diese (vereinfachte) Situation:

<div class="page-content">
  <p>text</p>
  <p><img src="" /></p>
  <p>text</p>
  <!-- ... -->
</div>

Und :

.page-content {
  padding: 0 20px;
}

.page-content img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

Auf diese Weise habe ich immer eine .page-content in meinem .page-content div (das viel mehr enthält als das, was ich hier kopiert habe). Die Bilder können nicht mehr als die Breite der Seite abzüglich der Auffüllung einnehmen.

Es funktioniert auf jeder Bildschirmgröße.

Beispiel:

Ich möchte jedoch die Bilder auf einem Telefonbildschirm in voller Breite anzeigen (unter Umgehung des übergeordneten 20px-Auffüllens).

zB:

Ich könnte mein Problem lösen, wenn der Elternteil (der <p> ) einen negativen Rand hatte ( margin: 0 -20px; ), aber die HTML-Datei wird von Jekyll aus einer Markdown-Datei erzeugt, und ich kann keine Klassen darin hinzufügen.

Ich kann keinen Weg finden, dies zu tun, abgesehen davon, dass .page-content von .page-content und auf jedes Kind .page-content . Was ich lieber nicht machen würde.

Ich kann auch keine feste Breite einstellen, weil ich möchte, dass das auf jeder Bildschirmgröße funktioniert.

Gibt es eine Möglichkeit, das übergeordnete Element in CSS auszuwählen? Oder ein anderes Feature, von dem ich nichts weiß?

Vielen Dank.


sowie Suggestionen oben Sie könnten CSS abhängig von der Verbindung des Geräts ändern (nicht sicher, welche Umgebung Sie verwenden) oder von der Breite des Bildschirms, obwohl Sie Bildschirmgrößen etc. sorgfältig berücksichtigen müssen, wenn Sie diesen Ansatz verwenden

dh
@media screen und (max-width: 400px) {p {margin: 0 -20px; }}

Sie würden wahrscheinlich spezifischer als nur p sein wollen.


img {
  width: calc(100% + 40px);
  margin-left: calc(-20px);
  margin-right: calc(-20px);
}

Ich setze calc in den Rand - links und rechts, denn wenn die Berechnungsfunktion nicht vom Browser implementiert wird, unterbricht es nicht das Design.


Verwenden Sie die akzeptierte Lösung von hier und fügen Sie eine @ media-Abfrage für mittlere bis große Anzeigen hinzu, um den Rand beizubehalten:

@media screen and (min-width: 600px) {
  .img-wrapper {
    margin: 0 0;
  }
}

Stellen Sie auch width=100%; auf deinem img.





responsive-design