1
"이미지를 판매하는 미디어 블록"행이 있습니다. 현재 모든 것을 질서있게 유지하기 위해 flexbox를 사용하고 있지만 결국 테이블 - 셀 또는 인라인 블록으로 대체 할 것입니다. 그건 문제가 아니에요. 사실 flexbox는 놀랍습니다.하나의 이미지가 다른 두 개의 이미지보다 큰 경우 반응이 좋은 ... 하나의 이미지가 다른 두 이미지보다 크다면
예 : http://drwoe.nl/
내 문제점이있다 : 이미지의 두 개의 동일한 폭과 높이이다. 내부에 삽화가있는 캐릭터가있는 서클을 상상해보십시오. 세 번째 이미지에는 높이와 너비가 같은 원이 있지만 그림에 표시된 문자는 원에서 빠져 나와 이미지가 커집니다.
나는 첫 번째 두 이미지에 반응 형 트리트먼트를 주었고, 함께 잘 리사이즈했다. 디자이너가 원하는대로 렌더링 할 세 번째 렌더링을 얻으려면 필자가 원의 크기와 일치하도록 최소 너비 (최소)를 지정해야합니다. 이게 말이 돼?
이미지 크기를 좋게 조정할 필요가 없다면 문제가되지 않습니다. 그러나 세 번째 이미지를 유지하는 방법을 알아낼 수 없습니다. 세 번째 이미지는 기술적으로 두 이미지보다 큽니다 ("브레이크 아웃"그림으로 인해).
디자인의 PSD가 있고 필요한 조각을 꺼낼 수 있습니다. 나는 CSS3 서클을 만들고 그림을 가상 엘레멘트 (절대적으로 배치)에 추가하려고 시도했지만, 함께 크기를 조정할 수는 없었다.
이것은 진정한 두뇌 티저인가요? 아니면 간단한 것을 놓친 것입니까? 매우 감사합니다!
문제를 설명하는 js fiddle (http://jsfiddle.net/)은 코드가 좋거나 좋을 때 좋습니다. –
죄송합니다, chadocat. 여기 예가 있습니다 : http://codepen.io/matthewbivins/pen/Ckcme – Macnab
그래서 여기에 나와있는 문제에 대한 임시 해결 방법이 있습니다 : 이미지를 동일한 너비의 .jpeg로 자른 다음 높이, 마지막 이미지의 크기 (더 큰 이미지)를 기준으로합니다. 그것은 약간 더러워 졌다고 느꼈지만, 적어도 작동합니다. 나는 거기에 더 좋은 방법이 있는지 아직도 알고 싶다! – Macnab