Soru Kapalı görüntüye sıkıca
sığdırılsın mı?


Durum benim bir imgim var ve ben img'in genişliği olan bir pop-caption caption kutusu istiyorum. Altyazıyı img'nin bir alt öğesi olarak ekleyemiyorum, çünkü img etiketleri çocukları almaz. Bu yüzden benim fikrim şunun gibi bir şeydi:

<div>
   <img/>
   <div>
      ...caption...
   <div>
</div>

Sorun, dışsal elemanlar, ebeveynlerinin genişliğini doldurmak için genişlerler, çünkü blok elemanlar yapar ve bu yüzden resim yazısı-div eşit ölçüde genişler ve ben de buna benzer bir şey alırım:

enter image description here

Dış div, sayfanın genişliği haline geldiğinde, başlık, dış div genişliğini izler ve böylece görüntüden dışarı yapışır.

Ben dış div genişliğini elle ayarlamak istemiyorum, çünkü bu alt şablon sitenin tüm şekilleri ve boyutları görüntüleri için kullanıyorum. Ebeveynini doldurmaktan ziyade, dıştan bir görüntüyü kucaklamak için bir şey var mı?


21
2017-08-24 15:55


Menşei


Benzer bir soruya verilen bu cevap benim için iyi çalıştı: stackoverflow.com/a/19113067/120290 - özellikle resmin altındaki altyazıya ihtiyaç duyduğumdan, overlaid değil. - Toph


Cevaplar:


Ben dış div genişliğini elle ayarlamak istemiyorum, çünkü ben   tüm alt şekillerdeki tüm şekiller ve boyutlardaki resimler için   site. Dış-div imajını yerine getirmek için zaten var mı   Ebeveynini doldurmaktan mı?

İhtiyacın var display: inline-block ile kombine text-align: center.

Görmek:  http://jsfiddle.net/thirtydot/V3XyK/

HTML:

<div class="imageContainer">
    <div>
        <img src=".." />
        <span>...caption...</span>
    </div>
</div>

CSS:

.imageContainer {
    text-align: center;
}
.imageContainer img {
    display: block;
}
.imageContainer div {
    position: relative;
    display: inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1;
}
.imageContainer span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #000;
    background: rgba(0,0,0,.5);
}

29
2017-08-24 15:57



Bu işlenen yay =) ortalanmış bir görüntü etrafında sıkıca sarmanın Herkül'ün Oniki Görevi kadar zor olacağını biliyordu. - Li Haoyi


Belki sadece div genişliğini 1px yapın ve yapın overflow: visible


0
2017-08-24 16:00





Budur. Yukarıdaki cevabın aksine, IE'de çalışacaktır:

<style type="text/css">
     .outerCont {height:auto;width:auto;position:relative;z-index:1;margin:0px auto;overflow:hidden;display:inline;float:left;}
     .outerCont img {height:auto;width:auto;position:relative;z-index:2;}
     .comment {height:auto;width:100%;display:block;font-family:Arial, Helvetica, sans-serif;text-align:center;padding:10px;0px;10px;0px;color:#FFF;position:absolute;z-index:3;bottom:0;/*also set your semi transparent black background-image here using the background-image property*/}
 </style> 

Bunu böyle kullanırdınız:

<div class="outerCont">
    <img src="flower.jpg" /> <!--Or where ever the image is located -->
    <div class="comment">
        <p>Hello</p>
    </div>
</div>

Yukarıdaki iki yolla birlikte gelen tek sorun (madenin ve diğer ahbapların), görüntüyü merkezileştirmekten kurban etmemenizdir. Görüntüyü ortalamak için jQuery kullanarak bir JavaScript yaratmanız ve orada iç içeriğe göre genişlikleri ve yükseklikleri değiştirmek için CSS özelliğini kullanmanız gerekir. Ne soruyorsunuz, bizim için "Shrink Wrap" ı bir div 'ı içeriğiyle, sadece 3 özel durumda yapabileceğiniz bir şey. Kayan nesneler, Satır içi veya Inline-Block nesneleri ve Kesinlikle yerleştirilmiş nesneler. Hem Süzülmüş hem de Mutlak nesneler JavaScript kullanılmadan ortalanamaz ve Inline Block, IE'de doğru bir şekilde davranmaz; yani, ekranı kullanmanız gerekir: satır içi; yüzer: sol; bunun için satır içi blok gibi çalışmak. Resmi JavaScript ile ortalayabilir ve işte bu kadar. Bu kodu ancak istek üzerine sağlayabilirim.


0
2017-08-24 16:53



Cevabım hakkında konuştuğunuzu varsayarsak: inline-block IE6 / 7'de. - thirtydot