婊戝姩鍥剧墖鑷€傚簲image缁勪欢涓璦spectFill

Posted 2022-11-16

鏍囩锛?a href='http://www.mamicode.com/so/1/absolute' title='absolute'>absolute   mamicode   att   ima   缁勪欢   VID   border   ati   ack   

<!--html-->

<view class="videoBox">
  <view class="videoBox-text">
    <image src="https://xcx.hy720.com/wtt/videobtn.png"></image>
    <text>缇庨瑙嗛</text>
    <view>鏇村 ></view>
  </view>
  <scroll-view class="image-group" scroll-x="true">
    <view class="dingwei">
      <image src="https://xcx.hyw.cc/mp/attachment/images/7/2019/08/pCFfAPqi5ii9H9EFe8fEHFHIFEia2c.jpg" class="aa" mode=鈥榓spectFill鈥?/span>></image>   <!--mode=鈥榓spectFill鈥?鎺у埗鍥剧墖閫傚簲妗嗙殑瀹藉害锛屼笉瀹屽叏鏄剧ず锛屽彧鎴彇鍥剧墖鏈€涓棿鏄剧ず-->
      <view class="volume">
        <image src="https://xcx.hy720.com/wtt/wzbtn.png" class="tubiao"></image>
        <text>6.8k</text>
      </view>
      <text class="dingwei-title">鏈€璧板績鐨勫悓瀛?span style="color: #0000ff;"></text>
    </view>

    <view class="dingwei">
      <image src="https://xcx.hyw.cc/mp/attachment/images/7/2019/08/pCFfAPqi5ii9H9EFe8fEHFHIFEia2c.jpg" class="aa" mode=鈥榓spectFill鈥?/span>></image> <!--mode=鈥榓spectFill鈥?鎺у埗鍥剧墖閫傚簲妗嗙殑瀹藉害锛屼笉瀹屽叏鏄剧ず锛屽彧鎴彇鍥剧墖鏈€涓棿鏄剧ず-->
      <view class="volume">
        <image src="https://xcx.hy720.com/wtt/wzbtn.png" class="tubiao"></image>
        <text>6.8k</text>
      </view>
      <text class="dingwei-title">鏈€璧板績鐨勫悓瀛?span style="color: #0000ff;"></text>
    </view>

    <view class="dingwei">
      <image src="https://xcx.hyw.cc/mp/attachment/images/7/2019/08/pCFfAPqi5ii9H9EFe8fEHFHIFEia2c.jpg" class="aa" mode=鈥榓spectFill鈥?/span>></image> <!--mode=鈥榓spectFill鈥?鎺у埗鍥剧墖閫傚簲妗嗙殑瀹藉害锛屼笉瀹屽叏鏄剧ず锛屽彧鎴彇鍥剧墖鏈€涓棿鏄剧ず-->
      <view class="volume">
        <image src="https://xcx.hy720.com/wtt/wzbtn.png" class="tubiao"></image>
        <text>6.8k</text>
      </view>
      <text class="dingwei-title">鏈€璧板績鐨勫悓瀛?span style="color: #0000ff;"></text>
    </view>   
  </scroll-view>
</view>

<!--css-->

pagebackground-color: #efefef;
.image-group 
  display: flex;
  white-space: nowrap;
  margin-top: 30rpx;
  border-radius: 15rpx; 

.dingwei  
  width: 240rpx;
  height: 320rpx;
  position: relative;
  display: inline-block;
  margin-right: 20rpx;

.aa
  width: 100%;  /*鍥剧墖鐨勫楂樺繀椤绘湁鍚﹀垯mode=鈥榓spectFill鈥樺皢涓嶄細鏄剧ず鍥剧墖*/
  height: 100%;
  margin-right: 20rpx;
  border-radius: 10rpx;

.volumedisplay: flex;flex-wrap: wrap;width: 100rpx;height: 35rpx;border-radius: 20rpx;  background-color: rgba(3, 3, 3, 0.4);color: #fff;font-size: 24rpx;position: absolute;z-index: 9999; left: 135rpx; top: 10rpx;
.volume .tubiaowidth: 20rpx;height: 20rpx; margin-left: 10rpx;margin-top: 8rpx;margin-right: 3rpx;
.volume textwidth: 30rpx;height: 35rpx;line-height: 35rpx;
.dingwei-titlewidth: 100%;top:270rpx;left: 10rpx; display: block;position: absolute;z-index: 9999;color: #fff;font-size: 24rpx;
.videoBoxwidth: 94%;background-color: #fff;margin: 15rpx auto;border-radius: 20rpx;padding: 20rpx;
.videoBox-textdisplay: flex;flex-wrap: wrap;padding-top: 10rpx; padding-left: 10rpx;
.videoBox-text imagewidth: 50rpx;height: 50rpx;
.videoBox-text textwidth: 550rpx;height: 50rpx;line-height: 50rpx;padding-left: 10rpx;
.videoBox-text viewwidth: 90rpx; height: 35rpx;line-height: 35rpx; background-color: #ffdc1c;border-radius: 20rpx;font-size: 20rpx;text-align: center;margin-top: 5rpx;