Giới hạn chiều rộng hình ảnh trên hình ảnh hướng dọc/giữ nguyên tỷ lệ khung hình

Question

Tôi có thiết lập flexslider trên trang web đáp ứng. Thanh trượt tôi đang tạo sẽ chụp cả ảnh ngang và dọc. Tôi đã đặt smoothHeight: true để chiều cao điều chỉnh để vừa với hình ảnh.

Tại truy vấn phương tiện lớn nhất, vùng chứa linh hoạt rộng 750px. Điều này là tốt cho hình ảnh định hướng phong cảnh nhưng hình ảnh hướng chân dung trở nên quá lớn. Chiều rộng của hình ảnh dọc được đặt thành cùng kích thước với vùng chứa - rộng 750px và do đó chiều cao tối thiểu là gấp đôi và do đó bạn không thể xem toàn bộ hình ảnh mà không cần cuộn.

Trong css, tôi đã cố gắng thiết lập max-height: 750px giải quyết vấn đề về độ cao nhưng sau đó kéo giãn hình ảnh để vừa với chiều rộng 750px cao 750px.

Có ai biết cách nào để có được trình thu thập thông tin để giữ tỷ lệ khung hình và điều chỉnh chiều rộng của hình ảnh dựa trên max-height không? Vì vậy, các hình ảnh chân dung sẽ cao 750px nhưng vẫn duy trì tỷ lệ khung hình của chúng.

Answer 1

Tôi không hiểu về chức năng của Flexslider mà bạn đang nói - khi phóng to hình ảnh hoặc hình thu nhỏ đó trong thanh công cụ cuộn? Dù, có một giải pháp cho cả hai tình huống:

<style> 
figure { 
    outline: green solid 1px; 
    padding: 2px; 
} 
img { 
    width: 100%; 
    height: 100%; 
    display: block; 
    position: relative; 

    outline: red solid 1px; 
    opacity: .5; 
} 
.scale img{ 
    width: auto; 
    height: auto; 
    max-width: 100%; 
    max-height: 100%; 
    margin: 0 auto; 
    vertical-align: middle; 
} 
.toheight img{ 
    max-width: none; 
} 
</style> 
<figure class="scale toheight" width="200" height="200"> 
    <img src="http://placekitten.com/250/300"/> 
</figure> 

Giải pháp cho cây trồng hoặc quy mô hình ảnh trong container http://jsfiddle.net/iegik/ZzXru/

câu hỏi liên quan: How to align cropped element horizontally?

Answer 2

Hình ảnh nên duy trì tỷ lệ của nó theo mặc định, trừ khi bạn cũng có một tập hợp width: 100%;, trong trường hợp này bạn nên thay đổi điều này để sử dụng width: auto, thì max-height: 750px của bạn sẽ được đặt trước