CSS: 100% chiều rộng hoặc chiều cao trong khi vẫn giữ tỷ lệ khung hình?

Hiện tại, với PHONG CÁCH, tôi có thể sử dụng width: 100%và autotrên chiều cao (hoặc ngược lại), nhưng tôi vẫn không thể hạn chế hình ảnh vào một vị trí cụ thể, tương ứng là quá rộng hoặc quá cao.

Có ý kiến ​​gì không?

Nếu bạn chỉ xác định một chiều trên ảnh, tỷ lệ khung hình ảnh sẽ luôn được giữ nguyên.

Là vấn đề mà hình ảnh lớn hơn / cao hơn bạn muốn?

Bạn có thể đặt nó bên trong DIV được đặt thành chiều cao / chiều rộng tối đa mà bạn muốn cho hình ảnh, sau đó đặt tràn: ẩn. Điều đó sẽ cắt bất cứ điều gì ngoài những gì bạn muốn.

Nếu một hình ảnh rộng 100% và chiều cao: tự động và bạn nghĩ nó quá cao, điều đó đặc biệt vì tỷ lệ khung hình được giữ nguyên. Bạn sẽ cần cắt, hoặc thay đổi tỷ lệ khung hình.

Vui lòng cung cấp thêm một số thông tin về những gì bạn đang cố gắng thực hiện và tôi sẽ cố gắng giúp nhiều hơn nữa!

--- EDIT DỰA TRÊN PHẢN HỒI ---

Bạn có quen thuộc với max-width và max-height thuộc tính? Bạn luôn có thể đặt chúng thay thế. Nếu bạn không đặt bất kỳ mức tối thiểu nào và bạn đặt chiều cao và chiều rộng tối đa thì hình ảnh của bạn sẽ không bị biến dạng (tỷ lệ khung hình sẽ được giữ nguyên) và nó sẽ không lớn hơn bất kỳ kích thước nào dài nhất và đạt tối đa.

Vài năm sau, tìm kiếm cùng một yêu cầu, tôi tìm thấy một tùy chọn CSS sử dụng kích thước nền.

Nó được cho là hoạt động trong các trình duyệt hiện đại (IE9 +).

<div id="container" style="background-image:url(myimage.png)">
</div>

Và phong cách:

#container
{
  width:  100px; /*or 70%, or what you want*/
  height: 200px; /*or 70%, or what you want*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Tham khảo: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Và bản demo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

Bằng cách đặt thuộc tính CSS max-widththành 100%, một hình ảnh sẽ lấp đầy chiều rộng của phần tử cha mẹ của nó, nhưng sẽ không hiển thị lớn hơn kích thước thực của nó, do đó duy trì độ phân giải.

Đặt thuộc heighttính để autoduy trì tỷ lệ khung hình của hình ảnh, sử dụng kỹ thuật này cho phép ghi đè chiều cao tĩnh và cho phép hình ảnh uốn cong theo tỷ lệ theo mọi hướng.

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

Giải pháp làm việc đơn giản thanh lịch:

img {
  width: 600px;  /*width of parent container*/
  height: 350px; /*height of parent container*/
  object-fit: contain;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Có cùng một vấn đề. Vấn đề đối với tôi là thuộc tính chiều cao cũng đã được xác định ở nơi khác, đã sửa nó như thế này:

.img{
    max-width: 100%;
    max-height: 100%;
    height: inherit !important;
}

Giải pháp đơn giản:

min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
margin: 0;
padding: 0;

Nhân tiện, nếu bạn muốn căn giữa nó trong thùng chứa div cha, bạn có thể thêm các thuộc tính css đó:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Nó sẽ thực sự hoạt động như mong đợi :)

Một trong những câu trả lời bao gồm kích thước nền: chứa câu lệnh css mà tôi rất thích vì đây là câu lệnh đơn giản về những gì bạn muốn làm và trình duyệt chỉ thực hiện nó.

Thật không may sớm hay muộn bạn sẽ cần phải áp dụng một cái bóng mà không may sẽ không chơi tốt với các giải pháp hình ảnh nền.

Vì vậy, giả sử rằng bạn có một thùng chứa đáp ứng nhưng nó có ranh giới được xác định rõ ràng cho chiều rộng và chiều cao tối thiểu và tối đa.

.photo {
  max-width: 150px;
  min-width: 75px;
  max-height: 150px;
  min-height: 75px;
}

Và container có một img phải nhận biết các pixel về chiều cao của container để tránh hình ảnh rất cao bị tràn hoặc bị cắt.

Img cũng nên xác định chiều rộng tối đa 100% để trước tiên cho phép hiển thị chiều rộng nhỏ hơn và thứ hai là tỷ lệ phần trăm dựa trên tỷ lệ phần trăm.

.photo > img {
  max-width: 100%;
  max-height: 150px;
  -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,1);
  -moz-box-shadow:    0 0 13px 3px rgba(0,0,0,1);
  box-shadow:         0 0 13px 3px rgba(0,0,0,1);
}

Lưu ý rằng nó có một cái bóng đẹp;)

Thưởng thức một ví dụ trực tiếp tại fiddle này: http://jsfiddle.net/pligor/gx8qthqL/2/

Tôi sử dụng điều này cho một container hình chữ nhật với chiều cao và chiều rộng cố định, nhưng với hình ảnh có kích thước khác nhau.

img {
  max-width: 95%;
  max-height: 15em;
  width: auto !important;
}

Tốt nhất nên sử dụng tự động trên kích thước nên tôn trọng tỷ lệ khung hình. Nếu bạn không đặt thuộc tính khác thành tự động, hầu hết các trình duyệt hiện nay sẽ cho rằng bạn muốn tôn trọng khẩu phần khía cạnh, nhưng không phải tất cả chúng (ví dụ IE10 trên windows phone 8 thì không)

width: 100%;
height: auto;

Đây là một giải pháp rất đơn giản mà tôi đã đưa ra sau khi theo liên kết của conca và xem kích thước nền. Nó thổi hình ảnh lên và sau đó đặt nó ở giữa vào thùng chứa bên ngoài với tỷ lệ của nó.

<style>
#cropcontainer
{
  width:  100%; 
  height: 100%; 
  background-size: 140%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

<div id="cropcontainer" style="background-image: url(yoururl); />

Không nhảy vào một vấn đề cũ, nhưng ...

#container img {
      max-width:100%;
      height:auto !important;
}

Mặc dù điều này không phù hợp khi bạn sử dụng! Ghi đè quan trọng về chiều cao, nhưng nếu bạn đang sử dụng một CMS như WordPress đặt chiều cao và chiều rộng cho bạn, thì điều này hoạt động tốt.

Ngày nay, người ta có thể sử dụng vwvà vhcác đơn vị, tương ứng với 1% của v iewport's w idth và h tám.

https://css-tricks.com/fun-viewport-units/

Ví dụ:

img {
  max-width: 100vw;
  max-height: 100vh;
}

... sẽ làm cho hình ảnh càng rộng càng cao càng tốt, duy trì tỷ lệ khung hình, nhưng không rộng hơn hoặc cao hơn 100% của chế độ xem.

Sử dụng JQuery hoặc như vậy, vì CSS là một quan niệm sai lầm chung (vô số câu hỏi và thảo luận ở đây về các mục tiêu thiết kế đơn giản cho thấy điều đó).

CSS không thể thực hiện những gì bạn muốn: hình ảnh sẽ có chiều rộng 100%, nhưng nếu chiều rộng này dẫn đến chiều cao quá lớn, sẽ áp dụng chiều cao tối đa - và tất nhiên tỷ lệ chính xác sẽ là bảo quản.

Tôi nghĩ rằng đây là những gì bạn đang tìm kiếm, tôi đã tự tìm kiếm nó, nhưng sau đó tôi lại nhớ nó cho đến khi tôi tìm thấy mã.

background-repeat: repeat-x;
background-position: top;
background-size:auto;
background-attachment: fixed;

tiến hóa kỹ thuật số đang trên đường.