CSSを "ボックスシャドウ"からポートレートまたは風景画像に動的に変更する方法

Question

画像の向きに合わせてボックスシャドウを動的に変更するには、以下のコードが必要です。 。 。風景または肖像画のいずれか。ここに例へのリンクがあります：http://gbamedical.com/test3.php横長のボックスで縦向きの画像を放置していると、現在は面白そうです。また、サムネイルを同じ高さにして、ポートレートサムネイルを狭くする必要がある場合もあります。

CSS：

style>* { 
margin: 0; 
padding: 0; 
} 


.slider { 
width: 640px; 
position: relative; 
padding-top: 480px; 
margin: 20px auto; 
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); 
} 

.slider > img { 
position: absolute; 
left: 0; 
top: 0; 
transition: all 0.5s; 
} 

.slider input { 
display: none; 
} 

.slider label { 
width: 60px; 
margin: 20px 2px; 
float: left; 
border: 2px solid #999; 
cursor: pointer; 
transition: all 0.5s; 
opacity: 0.6; 
box-sizing: border-box; 
} 

.slider label img { 
width: 100%; 
display: block; 
} 

.slider input:checked + label { 
border-color: #666; 
opacity: 1; 
} 

.slider input ~ img { 
opacity: 0; 
transform: scale(1.1); 
} 

.slider input:checked + label + img { 
opacity: 1; 
transform: scale(1); 
} 
</style>  

PHPコード：

<div class="slider"> 
<?php 
$array = glob('ebayimg/8851gba050516/size_2/*'); 
$i = 1; 
foreach($array as $image) { 
?> 
<input type="radio" name="slide" id="image<?php echo $i ?>" <?php if($i == 1){  ?> checked <?php } ?>/> 
<label for="image<?php echo $i ?>"> 
    <img src="http://www.gbamedical.com/<?php echo $image ?>"/> 
</label> 
<img src="http://www.gbamedical.com/<?php echo $image ?>" height="480"/> 
<?php 
$i++; 
} 
?> 

Answer 1

あなたは、画像の幅を取得し、それに応じて.slider幅を変更することにより、その場でそれを変更するためにJavaScriptを使用する必要があります：ここでは

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(e) { 
    $("label").on('click',function() { 
     var preview = $(this).next(); 
     var getW = preview.width(); 
     $(".slider").css({"width":getW*.91}); 
    }); 
}); 
</script> 

はjsFiddle Demo

0であります

---

EDIT

スタイルのこのセットを試してみてください：上記のCSSを使用した

* { 
    margin: 0; 
    padding: 0; 
} 
.slider { 
    max-width: 640px; 
    position: relative; 
    padding-top: 480px; 
    margin: 20px auto; 
    display: block; 
    text-align: center; 
} 

.slider > img { 
    position: absolute; 
    left: 0; 
    top: 0; 
    transition: all 0.5s; 
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); 
} 

.slider input { 
    display: none; 
} 

.slider label { 
    height: 60px; 
    margin: 20px 2px; 
    float: left; 
    border: 2px solid #999; 
    cursor: pointer; 
    transition: all 0.5s; 
    opacity: 0.6; 
    box-sizing: border-box; 
} 

.slider label img { 
    max-height: 60px; 
    display: block; 
} 

.slider input:checked + label { 
    border-color: #666; 
    opacity: 1; 
} 

.slider input ~ img { 
    opacity: 0; 
    transform: scale(1.1); 
} 

.slider input:checked + label + img { 
    opacity: 1; 
    transform: scale(1); 
} 

Here is a jsFiddle demoを。