css - CSS画像サイズ、塗りつぶし方法、ただし拡大しない方法

Question

画像があり、特定の幅と高さ（ピクセル単位）を設定したい

しかし、css（width:150px; height:100px）を使用して幅と高さを設定すると、画像が引き伸ばされ、見苦しい場合があります。

CSSを使用して画像を特定のサイズに塗りつぶし、ストレッチしない方法はありますか？

塗りつぶしとストレッチ画像の例：

元の画像：

オリジナル

引き伸ばされた画像：

伸ばされた

塗りつぶされた画像：

いっぱい

上記の塗りつぶし画像の例では、最初に画像のサイズが150x255（アスペクト比を維持）に変更され、次に150x100にトリミングされることに注意してください。

score 728 · Accepted Answer

You can use the css property object-fit. ("sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.")

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

See example here

There's a polyfill for IE: https://github.com/anselmh/object-fit

Related: object-position (specifies the alignment of an element's contents within the it's box.)

score 427 · Accepted Answer

427

于 2012-08-01T16:17:42.090 に答える

score 81 · Accepted Answer

Enhancement on the accepted answer by @afonsoduarte.
in case you are using bootstrap

There are three differences:

Providing width:100% on the style.
This is helpful if you are using bootstrap and want the image to stretch all the available width.

Specifying the height property is optional, You can remove/keep it as you need

.cover {
   object-fit: cover;
   width: 100%;
   /*height: 300px;  optional, you can remove it, but in my case it was good */
}

By the way, there is NO need to provide the height and width attributes on the image element because they will be overridden by the style.
so it is enough to write something like this.
```
<img class="cover" src="url to img ..."  />
```

score 57 · Accepted Answer

唯一の実際の方法は、画像の周りにコンテナを配置して使用することoverflow:hiddenです。

HTML

<div class="container"><img src="ckk.jpg" /></div>

CSS

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

CSSでは、やりたいことを実行して画像を中央に配置するのは面倒です。jqueryには次のような簡単な修正があります。

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/

score 29 · Accepted Answer

CSS solution no JS and no background image:

Method 1 "margin auto" ( IE8+ - NOT FF!):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/

Method 2 "transform" ( IE9+ ):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

http://jsfiddle.net/5xjr05dt/1/

Method 2 can be used to center an image in a fixed width / height container. Both can overflow - and if the image is smaller than the container it will still be centered.

http://jsfiddle.net/5xjr05dt/3/

Method 3 "double wrapper" ( IE8+ - NOT FF! ):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    left: 50%;
}
.inner img {
    display: block;
    border: 1px solid blue; /* just for example */
    position: relative;
    right: 50%;
    opacity: .5; /* just for example */
}

<div class="outer">
  <div class="inner">
     <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/5/

Method 4 "double wrapper AND double image" ( IE8+ ):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 50%;
    bottom: 0;
    display: table;
    left: 50%;
}
.inner .real_image {
    display: block;
    border: 1px solid blue; /* just for example */
    position: absolute;
    bottom: 50%;
    right: 50%;
    opacity: .5; /* just for example */
}

.inner .placeholder_image{
  opacity: 0.1; /* should be 0 */
}

<div class="outer">
  <div class="inner">
    <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
    <img class="placeholder_image"  src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

http://jsfiddle.net/5xjr05dt/26/

Method 1 has slightly better support - you have to set the width OR height of image!
With the prefixes method 2 also has decent support ( from ie9 up ) - Method 2 has no support on Opera mini!
Method 3 uses two wrappers - can overflow width AND height.
Method 4 uses a double image ( one as placeholder ) this gives some extra bandwidth overhead, but even better crossbrowser support.

Method 1 and 3 don't seem to work with Firefox

score 13 · Accepted Answer

Solution not requiring image as a background and will auto-resize without being cut-off or distorting.

Another solution is to put the image in a container with the desired width and height. Using this method you would not have to set the image as a background image of an element.

Then you can do this with an img tag and just set a max-width and max-height on the element.

CSS:

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

.imgContainer img {
    max-width: 100%;
    max-height: 100%;
}

HTML:

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

Now when you change the size of the container the image will automatically grow as large as it can without going outside the bounds or distorting.

If you want to center the image vertically and horizontally you can change the container css to:

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

Here is a JS Fiddle http://jsfiddle.net/9kUYC/2/

score 7 · Accepted Answer

Not using css background
Only 1 div to clip it
Resized to minimum width than keep correct aspect ratio
Crop from center (vertically and horizontally, you can adjust that with the top, lef & transform)

Be careful if you're using a theme or something, they'll often declare img max-width at 100%. You got to make none. Test it out :)

https://jsfiddle.net/o63u8sh4/

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

score 5 · Accepted Answer

Building off of @Dominic Green's answer using jQuery, here is a solution that should work for images that are either wider than they are high or higher than they are wide.

http://jsfiddle.net/grZLR/4/

There is probably a more elegant way of doing the JavaScript, but this does work.

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();

score 4 · Accepted Answer

I helped build a jQuery plugin called Fillmore, which handles the background-size: cover in browsers that support it, and has a shim for those that don't. Give it a look!

score 4 · Accepted Answer

This will Fill images to a specific size, without stretching it or without cropping it

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
    object-fit:scale-down;
}

score 3 · Accepted Answer

次のようなものを試してください：http：//jsfiddle.net/D7E3E/4/

オーバーフローのあるコンテナの使用：非表示

編集：@DominicGreenは私を打ち負かしました。

score 3 · Accepted Answer

I think it's quite late for this answer. Anyway hope this will help somebody in the future. I faced the problem positioning the cards in angular. There are cards displayed for array of events. If image width of the event is big for card, the image should be shown by cropping from two sides and height of 100 %. If image height is long, images' bottom part is cropped and width is 100 %. Here is my pure css solution for this:

HTML:

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

CSS

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}

score 3 · Accepted Answer

after reading StackOverflow answers the simple solution I got is

.profilePosts div {

background: url("xyz");
background-size: contain;
background-repeat: no-repeat;
width: x;
height: y;

}

score 3 · Accepted Answer

you can do it by 'flex' display. for me!:

.avatar-img {
    display: flex;
    justify-content: center;
    align-items: stretch;
    border-radius: 50%;
    border: 1px  solid #dee2e6;
    height: 5.5rem;
    width: 5.5rem;
    overflow: hidden;
}
.avatar-img > img {
    flex-grow: 1;
    object-fit: cover;
}

<div>
  <div class="avatar-img">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqczw3Fb_TYsj0hbPEy0u7Ay2bVq1KurD6hw&amp;usqp=CAU" alt="Test!'s profile photo">
  </div>
  <div class="avatar-img">
    <img src="https://i.pinimg.com/236x/a1/37/09/a137098873af3bf6180dd24cbe388ae9--flower-iphone-wallpaper-wallpapers-flowers.jpg" alt="Test!'s profile photo">
  </div>
</div>

score 2 · Accepted Answer

2

To fit image in fullscreen try this:

background-repeat: round;

于 2019-09-23T06:46:11.300 に答える

score 0 · Accepted Answer

<div class="container">
     <img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>

score 0 · Accepted Answer

As far as I know, there is a plugin to make this simple.

jQuery Plugin: Auto transform <img> into background style

<img class="fill" src="image.jpg" alt="Fill Image"></img>

<script>
    $("img.fill").img2bg();
</script>

Besides, this way also fulfills the accessibility needs. As this plugin will NOT remove your <img> tag from your codes, the screen reader still tells you the ALT text instead of skipping it.

score 0 · Accepted Answer

you have to use background-size : cover in the css

js code

 <div>
   <div className={styles.banner}>banner</div>
 </div>

css code

.banner{
  background: 
    url("./images/home-bg.jpg");
  background-size: cover;
  height: 53rem;
  width: 100%;
}

object fit is not working
background-size: contain is also not working

css - CSS画像サイズ、塗りつぶし方法、ただし拡大しない方法

18 に答える 18

Related

Reference