StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>One solution is to use a background image centered within an element sized to the cropped dimensions.</p> <hr> <h1>Basic example</h1> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.center-cropped { width: 100px; height: 100px; background-position: center center; background-repeat: no-repeat; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="center-cropped" style="background-image: url('http://placehold.it/200x200');"> </div></code></pre> </div> </div> </p> <hr> <h1>Example with <code>img</code> tag</h1> <p>This version retains the <code>img</code> tag so that we do not lose the ability to drag or right-click to save the image. Credit to <a href="http://css-tricks.com/crop-top/">Parker Bennett</a> for the opacity trick.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.center-cropped { width: 100px; height: 100px; background-position: center center; background-repeat: no-repeat; overflow: hidden; } /* Set the image to fill its parent and make transparent */ .center-cropped img { min-height: 100%; min-width: 100%; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 5-7 */ filter: alpha(opacity=0); /* modern browsers */ opacity: 0; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><div class="center-cropped" style="background-image: url('http://placehold.it/200x200');"> <img src="http://placehold.it/200x200" /> </div></code></pre> </div> </div> </p> <hr> <h1><code>object-fit</code>/<code>-position</code></h1> <p><em><a href="http://caniuse.com/#feat=object-fit">See supported browsers</a>.</em></p> <p>The <a href="http://www.w3.org/TR/css3-images/">CSS3 Images specification</a> defines the <code>object-fit</code> and <code>object-position</code> properties which together allow for greater control over the scale and position of the image content of an <code>img</code> element. With these, it will be possible to achieve the desired effect:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.center-cropped { object-fit: none; /* Do not scale the image */ object-position: center; /* Center the image within the element */ height: 100px; width: 100px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><img class="center-cropped" src="http://placehold.it/200x200" /></code></pre> </div> </div> </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload