/ / Jak przyciąć prostokątny obraz do kwadratu za pomocą CSS? - html, css, image, crop

Jak przyciąć prostokątny obraz do kwadratu za pomocą CSS? - html, css, image, crop

Wiem, że nie da się właściwie zmodyfikować obrazu za pomocą CSS, dlatego umieszczam crop w cudzysłowie.

Chciałbym zrobić prostokątne obrazy i użyć CSS, aby wyglądały na kwadratowe bez zniekształcania obrazu.

Chciałem to zmienić:

wprowadź opis obrazu tutaj

Zaangażowany w to:

wprowadź opis obrazu tutaj

Odpowiedzi:

60 dla odpowiedzi № 1

Zakładając, że nie muszą znajdować się w tagach IMG ...

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 }

EDYCJA: Jeśli div musi link gdzieś po prostu dostosować HTML i style takie jak:

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 }

Zauważ, że można to również zmodyfikować, aby było responsywne, na przykład% szerokości i wysokości itp.


224 dla odpowiedzi nr 2

Czyste rozwiązanie CSS bez opakowania div lub inny niepotrzebny kod:

img {
object-fit: cover;
width:230px;
height:230px;
}

49 dla odpowiedzi nr 3
  1. Umieść swoje zdjęcie w div.
  2. Podaj swój div wyraźnych wymiarów kwadratowych.
  3. Ustaw właściwość przepełnienia CSS na div do ukrytego (overflow:hidden).
  4. Umieść swoje wyobrażenie w div.
  5. Zysk.

Na przykład:

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

28 dla odpowiedzi nr 4

Używanie wielkości tła: okładka - 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;
}

Narzut:

<div class="image-container"></div>

11 dla odpowiedzi nr 5

Ostatnio natknąłem się na ten sam problemi skończyło się na nieco innym podejściu (nie byłem w stanie użyć obrazów tła) .Trzeba jednak odrobiny jQuery określić orientację obrazów (na pewno jednak można użyć zwykłego JS).

Napisałem post na blogu o tym jeśli jesteś zainteresowany więcej objaśnieniami, ale kod jest dość prosty:

HTML:

<ul class="cropped-images">
<li><img src="/images/http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
<li><img src="/images/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");
}
});

});

1 dla odpowiedzi № 6

Użyj CSS: przepełnienie:

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

1 dla odpowiedzi № 7

Miałem podobny problem i nie mogłem "pójść na kompromis" z obrazami tła. Wpadłem na to.

<div class="container">
<img src="/images/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"});

Mam nadzieję że to pomoże!

Przykład: https://jsfiddle.net/cfbuwxmr/1/


1 dla odpowiedzi № 8

Użyj div z wymiarami kwadratowymi z obrazkiem w środku z klasą .testimg:

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

.testimg {
margin-left: -76px

}

lub kwadratowy element div z tłem obrazu.

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

Oto kilka przykładów: http://jsfiddle.net/QqCLC/1/

ZAKTUALIZOWANE WIĘCEJ CENTRA OBRAZÓW

.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="/images/http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>

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