Php 如何将css修改为"；盒影“；动态地描绘或横向地描绘图像

我期待有下面的代码来动态地改变框阴影，以匹配图像方向。风景画或肖像画。这里有一个链接到一个例子：当一幅肖像画用横向框左对齐时，它看起来很有趣。还希望有相同高度的缩略图，这将需要肖像缩略图更窄

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>    

样式>*{
保证金：0；
填充：0；
}
.滑块{
宽度：640px；
位置：相对位置；
填充顶部：480px；
保证金：20px自动；
盒影：0 10px20px-5pxRGBA（0,0,0,0.75）；
}
.slider>img{
位置：绝对位置；
左：0；
排名：0；
过渡：均为0.5s；
}
.滑块输入{
显示：无；
}
.滑块标签{
宽度：60px；
利润率：20px 2px；
浮动：左；
边框：2个实心#999；
光标：指针；
过渡：均为0.5s；
不透明度：0.6；
框大小：边框框；
}
.滑块标签img{
宽度：100%；
显示：块；
}
.滑块输入：选中+标签{
边框颜色：#666；
不透明度：1；
}
.滑块输入~img{
不透明度：0；
转换：比例（1.1）；
}
.滑块输入：选中+标签+img{
不透明度：1；
变换：比例（1）；
}

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++;
}
?>

通过获取图像的宽度并相应地更改
.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>

使用上面的css。
这正是我想要的外观，但不幸的是，我是在eBay上使用的，他们正在关闭所有使用“活动内容”的物品，所以我希望找到一种没有javascript的方式。多年来，我一直在使用一个优雅的图像库，它使用javascript，但我只有不到一个月的时间来切换。啊，是的，那是个问题。我不知道你怎么能用CSS显式地做到这一点！让我看看我是否能用css做得更多一些…但这不是我的强项…我真的很感谢你的努力/帮助！非常感谢。肯定看起来好多了。。如果它能居中，那就太完美了。此外，我还想尝试将缩略图设置为统一的高度（“肖像”图像显然会更窄）。谢谢你的帮助！现在检查一下，缩略图是统一的，但是您可能需要添加一些其他html以使主图像居中。摆脱这一点的是
位置：绝对和
左：0.slider>img
类中的code>。
* {
  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);
}