it-swarm.com.de

Wie kann ich mit CSS ein rechteckiges Bild in ein quadratisches "zuschneiden"?

Ich weiß, dass es unmöglich ist, ein Bild mit CSS tatsächlich zu ändern, weshalb ich das Zuschneiden in Anführungszeichen setze.

Ich möchte rechteckige Bilder aufnehmen und mit CSS quadratisch darstellen, ohne das Bild zu verzerren.

Ich würde im Grunde gerne Folgendes machen:

enter image description here

Das mögen:

enter image description here

144
novicePrgrmr

Vorausgesetzt, sie müssen nicht in IMG-Tags enthalten sein ...

HTML:

<div class="thumb1">
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

BEARBEITEN: Wenn das div irgendwo verlinken muss, passen Sie einfach HTML und Stile wie folgt an:

HTML:

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

Beachten Sie, dass dies auch so geändert werden kann, dass es anspricht, z. B.% Breiten und Höhen usw.

71
Michael

Eine reine CSS-Lösung ohne Wrapper div oder anderen nutzlosen Code:

img {
  object-fit: cover;
  width:230px;
  height:230px;
}
355
Vision Hive
  1. Platziere dein Bild in einem Div.
  2. Geben Sie Ihrem div explizite quadratische Abmessungen.
  3. Setzen Sie die CSS-Überlaufeigenschaft für das div auf hidden (overflow:hidden).
  4. Stellen Sie sich vor, Sie stecken in der Div.
  5. Profitieren.

Zum Beispiel:

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>
52
j08691

Verwenden der Hintergrundgröße: cover - http://codepen.io/anon/pen/RNyKzB

CSS:

.image-container {
  background-image: url('http://i.stack.imgur.com/GA6bB.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:250px;
  height:250px;
}  

Markup:

<div class="image-container"></div>
31
Philip Nuzhnyy

Vor kurzem bin ich auf dasselbe Problem gestoßen und habe einen etwas anderen Ansatz gewählt (ich konnte keine Hintergrundbilder verwenden). Es erfordert allerdings ein wenig jQuery, um die Ausrichtung der Bilder zu bestimmen (ich bin sicher, Sie könnten stattdessen auch einfaches JS verwenden).

Ich habe einen Blog-Post darüber geschrieben , wenn Sie weitere Erklärungen benötigen, der Code aber ziemlich einfach ist:

HTML:

<ul class="cropped-images">
  <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
  <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>

CSS:

li {
  width: 150px; // Or whatever you want.
  height: 150px; // Or whatever you want.
  overflow: hidden;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}
li img {
  max-width: 100%;
  height: auto;
  width: auto;
}
li img.landscape {
  max-width: none;
  max-height: 100%;
}

jQuery:

$( document ).ready(function() {

    $('.cropped-images img').each(function() {
      if ($(this).width() > $(this).height()) {
        $(this).addClass('landscape');        
      }
    });

});
14
FreddyBushBoy

Befindet sich das Bild in einem Container mit einer Breite von responsive:

HTML

<div class="img-container">
  <img src="" alt="">
</div>

CSS

.img-container {
  position: relative;

  &::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
3
JKL

Ich hatte ein ähnliches Problem und konnte mit Hintergrundbildern keine "Kompromisse" eingehen. Das habe ich mir ausgedacht.

<div class="container">
    <img src="http://lorempixel.com/800x600/nature">
</div>

.container {
    position: relative;
    width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
    border: 2px solid #fff; /* just to separate the images */
    overflow: hidden; /* "crop" the image */
    background: #000; /* incase the image is wider than tall/taller than wide */
}

.container img {
    position: absolute;
    display: block;
    height: 100%; /* all images at least fill the height */
    top: 50%; /* top, left, transform trick to vertically and horizontally center image */
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});

Hoffe das hilft!

Beispiel: https://jsfiddle.net/cfbuwxmr/1/

2
Zach Botterman

Verwenden Sie CSS: overflow:

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}

Verwenden Sie entweder ein Div mit quadratischen Abmessungen, wobei das Bild in der Klasse .testimg enthalten ist:

.test {
width: 307px;
height: 307px;
overflow:hidden
}

.testimg {
    margin-left: -76px

}

oder ein quadratisches div mit einem Hintergrund des Bildes.

.test2 {
width: 307px;
height: 307px;
    background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

Hier sind einige Beispiele: http://jsfiddle.net/QqCLC/1/

AKTUALISIERT SO DIE BILDZENTREN

.test {
  width: 307px;
  height: 307px;
  overflow: hidden
}

.testimg {
  margin-left: -76px
}

.test2 {
  width: 307px;
  height: 307px;
  background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}
<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>

<div class="test2"></div>
1
tech292