IE에서 이미지에 맞게 크기를 조정 하라는 앵귤러 머티리얼 디자인의 지침 을 얻는 방법은 무엇입니까?
가능한 문제로 material.angularjs.org 사이트에 올렸습니다만, CSS 베이스의 솔루션이 있는 경우에 대비해 여기에 올립니다.
차원이 다른 여러 개의 이미지 열이 있는 "메이슨리 레이아웃"을 만들려고 합니다.각각의 이미지를 보관하기 위해 카드를 사용하려고 합니다만, Chrome과 Firefox에서는 기대대로 동작합니다.카드의 축척은 창에 맞추어(플렉스를 사용해), 이미지의 축척은 카드의 사이즈와 일치합니다.다만, IE11 에서는, 카드의 높이가 이미지의 실제의 높이와 일치하고 있는 것 같습니다.이것은, 작은 사이즈로 축소되어도 마찬가지입니다.문제를 설명하는 Codepen을 만들었습니다.
http://codepen.io/sstorie/pen/myJWxQ
<body ng-app="materialApp" layout-fill>
<div ng-controller="AppCtrl" layout='column'>
<md-toolbar class='md-medium-tall'>
<div class="md-toolbar-tools">
<span>Fixed to Top</span>
</div>
</md-toolbar>
<div class='md-padding' layout="row" flex>
<div layout="row" flex>
<div layout="column" ng-repeat="photoColumn in data.photos3p" flex>
<md-card class="card" data-ng-repeat="photo in photoColumn">
<img ng-src="{{photo.path}}">
</md-card>
</div>
</div>
</div>
</div>
</body>
...그리고 여기에 추가한 유일한 비소재 CSS는 다음과 같습니다.
.card img {
width: 100%;
height: auto;
}
다음은 Chrome에서 실행되는 예입니다.카드의 폭과 높이는 이미지에 따라 다릅니다.
IE11의 결과는 다음과 같습니다.IE에서 볼 수 있듯이 수평으로 배치된 이미지의 높이는 카드의 폭에 맞게 축소되지만 카드의 높이는 그에 따라 축소되지 않습니다.이미지의 높이는 그대로입니다.
이런 것에 대한 CSS 수정이 있습니까?아니면 어떻게 해야 하는지가 더 문제인가요?<md-card>디렉티브가 실장되어 있는가?
확실히 말하면, 나는 이 도서관이 현재 진행 중인 작품이라는 것을 알고 있으며, 지금까지도 이 도서관이 마음에 든다.저는 CSS를 잘 다루지 못하기 때문에, 이것이 수정 가능한 것인지, 아니면 소재 코드에서 문제가 수정될 때까지 기다려야 하는지 잘 모르겠습니다.
문제는 단순한 CSS일 뿐 IE는 "높이: auto"를 잘 처리하지 못하기 때문에 특정 값을 지정해야 합니다.
그럼, 다음과 같은 솔루션이 있습니다.
.parent {
display: block;
}
.card img {
width: 100%;
height: 100%;
display: inline-block;
}
행운을 빕니다.
언급URL : https://stackoverflow.com/questions/27132864/how-to-get-angular-material-designs-md-card-directive-to-scale-to-image-prope
'programing' 카테고리의 다른 글
| 오류: $digest() 반복 횟수가 10회에 달했습니다.중단 중! 동적 정렬 조건 포함 (0) | 2023.03.10 |
|---|---|
| 키를 누를 때 입력 필드를 흐리게 표시 각도 입력 (0) | 2023.03.10 |
| Spring Boot Rest Controller는 다른 HTTP 상태 코드를 반환하는 방법 (0) | 2023.03.10 |
| 이유: void가 mockito 사용에 적합하도록 유형 변수 T의 인스턴스가 존재하지 않습니다. (0) | 2023.03.10 |
| 이온 이력은 어떻게 동작하며 비루트 스택은 언제 작성됩니까? (0) | 2023.03.10 |