裁剪图像以填充高度相对于宽度的父对象

Question

我正在尝试通过裁剪而不是拉伸来将图片填充到div容器中。即使图像处于横向或纵向，我也需要将图像居中。

#main-container {
  display: flex;
  width: 400px;
  height: 200px;
  background: green;
}

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 1px;
  width: 133px;
  /* padding-bottom: calc(33.3% - 2px); */
  height: 133px;
  background: violet;
}

img {
  /* margin-top: 100%; */
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

.landscape {
  /* max-width: 100%; */
  max-height: 100%;
}

.portrait {
  max-width: 100%;
}

.square {
  max-width: 100%;
}

<div id="main-container">
    <div class="img-container">
        <img class="landscape" src="https://images.pexels.com/photos/371633/pexels-photo-371633.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>   
    <div class="img-container">
        <img class="portrait" src="https://i.pinimg.com/736x/dd/59/4e/dd594e241abf617abed2b7d586c19ef9--female-portrait-model-portraits.jpg?b=t">
    </div>   
    <div class="img-container">
        <img class="square" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
    </div>    
</div>

我需要将其应用于高度相对于宽度而不是像素的容器。但它不适用于landscape images。到目前为止，它正在处理人像图像。请帮忙，谢谢。

Answer 1

您可以替换

 .landscape{
    max-height:100%;
}

与

 .landscape{
    min-height:100%;
}

还要在顶部和底部添加边距，如下所示：

img{
  margin-top: auto;
  margin-bottom: auto;

}

Answer 2

对于.landscape，请使用min-height: 100%;。

#main-container {
  display: flex;
  width: 400px;
  height: 200px;
  background: green;
}

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 1px;
  width: calc(33.3% - 2px);
  padding-bottom: calc(33.3% - 2px);
  height: 0;
  background: violet;
}

img {
  margin-top: 100%;
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

.landscape {
  min-height: 100%;
}

.portrait {
  max-width: 100%;
}

.square {
  max-width: 100%;
}

<div id="main-container">
    <div class="img-container">
        <img class="landscape" src="https://images.pexels.com/photos/371633/pexels-photo-371633.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
    </div>   
    <div class="img-container">
        <img class="portrait" src="https://i.pinimg.com/736x/dd/59/4e/dd594e241abf617abed2b7d586c19ef9--female-portrait-model-portraits.jpg?b=t">
    </div>   
    <div class="img-container">
        <img class="square" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
    </div>    
</div>

Answer 3

删除import {ServicecaseService} from 'src/app/service-test-case/service/servicecase.service'; import { ServiceTestCaseComponent } from './service-test-case.component'; import { servicecasemodel } from './model/servicecasemodel'; import { Observable,from,of, observable,throwError } from 'rxjs'; describe('ServiceTestCaseComponent', () => { let component :ServiceTestCaseComponent; let service: ServicecaseService; const Getdata :servicecasemodel[] =[ { _id:'1', propertyName:'Pro Nmae', propertyDesc:'Pro Desc', propertyType:1 }, { _id:'2', propertyName:'Pro Nmae 2', propertyDesc:'Pro Desc 2', propertyType:3 }, ]; beforeEach(() => { service = new ServicecaseService(null); component = new ServiceTestCaseComponent(service); }); it('should set property with the items returned',() =>{ spyOn(service,'getproduct').and.callFake(() => { return Observable.from([Getdata]); }); // Make actual call component.ngOnInit(); //expect(service).toBeTruthy(); expect(component.product).toEqual(Getdata); }); }); 中的min-height: 100%。 .landscape已经有img

min-height: 100%

#main-container {
  display: flex;
  width: 400px;
  height: 200px;
  background: green;
}

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 1px;
  width: 133px;
  /* padding-bottom: calc(33.3% - 2px); */
  height: 133px;
  background: violet;
}

img {
  /* margin-top: 100%; */
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

.landscape {
  /* max-width: 100%; 
   max-height: 100%;*/
}

.portrait {
  max-width: 100%;
}

.square {
  max-width: 100%;
}

Answer 4

从标记img min-width: 100%; min-height: 100%;中删除&&添加属性width=100%

#main-container {
  display: flex;
  width: 400px;
  height: 200px;
  background: green;
}

.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 1px;
  width: 133px;
  height: 133px;
  background: violet;
}

img {
  flex-shrink: 0;
}

.landscape {
  /* max-width: 100%; 
   max-height: 100%;*/
}

.portrait {
  max-width: 100%;
}

.square {
  max-width: 100%;
}

<div id="main-container">
  <div class="img-container">
    <img class="landscape" width="100%" src="https://images.pexels.com/photos/371633/pexels-photo-371633.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
  </div>
  <div class="img-container">
    <img class="portrait" src="https://i.pinimg.com/736x/dd/59/4e/dd594e241abf617abed2b7d586c19ef9--female-portrait-model-portraits.jpg?b=t">
  </div>
  <div class="img-container">
    <img class="square" src="http://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
  </div>
</div>