16:9
Video gibi yaklaşık yatay sabit en boy oranına sahip bir sitem var .
Mevcut genişliği ve mevcut yüksekliği doldurmak için ortalanmasını ve genişletilmesini istiyorum, ancak her iki tarafta da asla büyümemesini istiyorum.
Örneğin:
- Uzun ve ince bir sayfa, orantılı bir yüksekliği korurken tam genişliğe kadar uzanan içeriğe sahip olacaktır.
- Kısa geniş bir sayfa, orantılı bir genişlikle tam yüksekliğe uzanan içeriğe sahip olacaktır.
Baktığım iki yöntem var:
- Bir kapsayıcıyı genişletmek için doğru en boy oranına sahip bir görüntü kullanın
div
, ancak büyük tarayıcılarda aynı şekilde davranmasını sağlayamadım. - Orantılı bir alt dolgu ayarlamak, ancak bu yalnızca genişliğe göre çalışır ve yüksekliği yok sayar. Genişlikle birlikte büyümeye devam ediyor ve dikey kaydırma çubuklarını gösteriyor.
Bunu JS ile kolayca yapabileceğinizi biliyorum, ancak saf bir CSS çözümü istiyorum.
Herhangi bir fikir?
position: relative (default) height: 0 padding-<top/bottom>: H/W*100%