画像の幅を狭くしても、画像を横方向に中央に配置し、最大幅のオーバーレイを使用する

Question

画像は固定幅が固定されたwellの内側にあります。

1. は、（1）私のイメージは常に水平方向の中央取得する方法（私は margin:0 autoを使用してみましたが、それは仕事をdidntの）。 max-width:300pxが、より小さい幅の例のように画像を持っている、 は私もフルの最大幅をカバーするオーバーレイを必要
2. （2）また、私は持っている.overlay 、それはすべて私の他の画像のために働きます（ well（今、この例のように、オーバーレイは、これらのより小さな幅画像の幅に制限されている）。可能 これらの2つのことをするには？

.image-video-linkcar { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.image-video-linkcar img { 
 
    max-width: auto; 
 
    max-height: 230px; 
 
    margin: 0; 
 
    padding: 0; 
 
    vertical-align: middle; 
 
} 
 

 
.categorycar { 
 
    font-size: 10px; 
 
    font-weight: 700; 
 
    font-family: 'Montserrat',sans-serif; 
 
    font-style: bold; 
 
    text-align: center; 
 
    color: #777; 
 
    margin-left: 15px; 
 
    outline: 1px solid #fff; 
 
    padding: 2px 20px 2px 8px; 
 
    background-color: #FFF; 
 
    opacity: .9; 
 
    position: absolute; 
 
    opacity: .7; 
 
    bottom: 0; 
 
    right: 0; 
 
    min-height: 0; 
 
} 
 

 
.brandcar { 
 
    font-size: 10px; 
 
    font-weight: 700; 
 
    font-family: 'Montserrat',sans-serif; 
 
    font-style: bold; 
 
    text-align: center; 
 
    color: #777; 
 
    margin-left: 15px; 
 
    outline: 1px solid #fff; 
 
    padding: 2px 20px 2px 8px; 
 
    background-color: #fff; 
 
    opacity: .9; 
 
    position: absolute; 
 
    opacity: .7; 
 
    top: 0; 
 
    right: 0; 
 
    min-height: 0; 
 
} 
 

 
.image-video-linkcar:hover .overlay { 
 
    opacity: 1; 
 
} 
 

 

 
.well.carousel { 
 
    width: 100%; 
 
    height: auto; 
 
    height: 420px; 
 
    width: 400px; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: none; 
 
    background-color:red 
 
} 
 

 

 

 

 
.product-detailscar .overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    border-radius: 0; 
 
    background: #F7F7F7; 
 
    color: #FFF; 
 
    padding: 10px; 
 
    border-top: 1px solid #A10000; 
 
    border-bottom: 1px solid #A10000; 
 
/*vertical-align: middle;*/ 
 
    -webkit-transition: opacity 500ms; 
 
    -moz-transition: opacity 500ms; 
 
    -o-transition: opacity 500ms; 
 
    transition: opacity 500ms; 
 
/*padding: 25px; 
 
    text-align: center;*/ 
 
}

<div class="well carousel"> 
 
      <div class="product-detailscar"> 
 
       <div class="image-video-linkcar"> 
 
        <img alt="#" src= 
 
        "http://lorempixel.com/100/200"> 
 
        <div class="brandcar"> 
 
         BRAND 
 
        </div> 
 
        <div class="categorycar"> 
 
        CATEGORY 
 
        </div> 
 
        <div class="overlay"> 
 
         <div class="subcategorycar"> 
 
         SUBCAT 
 
        </div> 
 
         <div class="idcar"> 
 
         ID 
 
        </div>

の

Answer 1

.product-detailscar divからオーバーレイを移動する必要があります。

.well { 
 
    width: 300px; 
 
    background: orange; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.image-video-linkcar { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.image-video-linkcar img { 
 
    max-width: auto; 
 
    max-height: 230px; 
 
    margin: 0; 
 
    padding: 0; 
 
    vertical-align: middle; 
 
} 
 
.categorycar { 
 
    font-size: 10px; 
 
    font-weight: 700; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-style: bold; 
 
    text-align: center; 
 
    color: #777; 
 
    margin-left: 15px; 
 
    outline: 1px solid #fff; 
 
    padding: 2px 20px 2px 8px; 
 
    background-color: #FFF; 
 
    opacity: .9; 
 
    position: absolute; 
 
    opacity: .7; 
 
    bottom: 0; 
 
    right: 0; 
 
    min-height: 0; 
 
} 
 
.brandcar { 
 
    font-size: 10px; 
 
    font-weight: 700; 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-style: bold; 
 
    text-align: center; 
 
    color: #777; 
 
    margin-left: 15px; 
 
    outline: 1px solid #fff; 
 
    padding: 2px 20px 2px 8px; 
 
    background-color: #fff; 
 
    opacity: .9; 
 
    position: absolute; 
 
    opacity: .7; 
 
    top: 0; 
 
    right: 0; 
 
    min-height: 0; 
 
} 
 
.well:hover .overlay { 
 
    opacity: 1; 
 
} 
 
.well .overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0; 
 
    border-radius: 0; 
 
    background: rgba(0, 255, 0, .5); 
 
    color: #FFF; 
 
    padding: 10px; 
 
    border-top: 1px solid #A10000; 
 
    border-bottom: 1px solid #A10000; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="well carousel"> 
 
    <div class="product-detailscar"> 
 
    <div class="image-video-linkcar"> 
 
     <img alt="#" src="http://www.fillmurray.com/100/200"> 
 
     <div class="brandcar"> 
 
     BRAND 
 
     </div> 
 

 
     <div class="categorycar"> 
 
     CATEGORY 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
    <div class="overlay"> 
 
    <div class="subcategorycar"> 
 
     SUBBBBBBCATEGORY 
 
    </div> 
 

 
    <div class="idcar"> 
 
     IDDDDCAR 
 
    </div> 
 
    </div> 
 
</div>