Question

假设我有以下代码：

img {
  max-widht: 100%;
  max-height: 100%;
}

<div width="500" height="500">
  <img src="https://placehold.it/250x150">
</div>

如果width或height大于500像素，则此方法适用于所有图像。但是对于较小的图像，该图像将不会覆盖div。是否有CSS方法可以将图片的大小限制为至少width: 100%或height: 100%，而不管其原始大小如何？

编辑： disinfor的解决方案为我工作。

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

Answer 1

执行以下操作：

img {
    width: 100%;
    height: auto;
}

较小的图像（在您的情况下，小于500像素宽）不能填满整个空间的原因是因为max-width的意思是“实际图像的最大宽度”。因此，如果改用width: 100%，则图像将填充其容器的空间。

使用height: auto将确保图像不会垂直拉伸/变形。

概念证明：

.normal, .land, .port, .fit {
  height: 200px;
  width: 200px;
}

img {
  width: 100%;
  height: auto;
}

div.land img,
div.port img {
  width: 100%;
  height: 100%;
}

div.fit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="fit">
  <img src="https://placehold.it/500x750">
</div>

<div class="fit">
  <img src="https://placehold.it/50x100">
</div>

<div class="normal">
  <img src="https://placehold.it/75x10">
</div>

<div class="normal">
  <img src="https://placehold.it/10x75">
</div>

<div class="land">
  <img src="https://placehold.it/75x10">
</div>

<div class="port">
  <img src="https://placehold.it/10x75">
</div>

Answer 2

img {
    max-width: 100%;
    object-fit: cover;
}

<div width="500" height="500">
    <img src="https://placehold.it/250/150">
</div>

Answer 3

我认为您回答了自己的问题！你有个div！ =>宽度：500像素，高度：500像素！当图像大于此尺寸时，最大宽度和最大高度可以正常工作！但是，当您的图片较小时，最大宽度就无济于事，因为图片宽度小于500px！例如，您有一个Image => width：300px。最大宽度：100％等于300px！那么您可以像这样更改代码：

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import { UniversalInterceptor } from './universal.interceptor';
@NgModule({
  imports: [
    AppModule,
    ServerModule
  ],
  providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: UniversalInterceptor,
    /* Multi is important or you will delete all the other interceptors */
    multi: true
  }],
  bootstrap: [AppComponent]
})
export class AppServerModule {}

但是如果您想要一个响应式图像：

 function angularRouter(req, res) { 
  res.render('index', {
    req,
    res,
    providers: [{
      provide: 'serverUrl',
      useValue: `${req.protocol}://${req.get('host')}`
    }]
  });
}

Answer 4

如果将图片置于背景，则可以使用background-size CSS规则：

css

    .block {
        background: url(my_picture.png) no-repeat 50% 50%;
        background-size: cover;
    }

html

    <div width="500" height="500" class="block"></div>

如何使图像适合其div CSS

4 个答案:

css

html