在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ img圖片進(jìn)行局部顯示

img圖片進(jìn)行局部顯示

數(shù)據(jù)庫(kù)中的圖片不規(guī)則，有橫的，有豎的。所以顯示的話想進(jìn)行局部顯示。這個(gè)需要怎么布局呢

回答
編輯回答
糖豆豆

clip-path 想怎么切就怎么切
MDN clip-path

2017年4月4日 05:11
編輯回答
拽很帥

html部分

<!--標(biāo)準(zhǔn)方圖-->
<div class="img">
  <img src="http://www.qqzhi.com/uploadpic/2014-09-14/070503273.jpg" alt="">
</div>
<!--橫圖-->
<div class="img">
  <img src="http://img3.duitang.com/uploads/item/201605/21/20160521140427_KVHu4.thumb.700_0.jpeg" alt="">
</div>
<!--豎圖-->
<div class="img">
  <img src="http://imgsrc.baidu.com/imgad/pic/item/79f0f736afc37931b2688421e1c4b74543a911b1.jpg" alt="">
</div>

樣式部分

<style>
  .img{
    width: 200px;height: 200px;overflow: hidden;background-color: #333;margin-bottom: 20px;
    position: relative;
  }
  .img>img{width: 100%;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
</style>

效果圖，不想要方圖的話就修改一下.img的width和heigh

clipboard.png

2017年6月28日 15:26
編輯回答
乞許

你是前端不？但是這個(gè)問題從后端解決問題比較好哦。

2017年11月15日 05:13
編輯回答
舊酒館

必須要用img嗎？
可以試試用background-image

background-size: cover;
background-position: center center;// 這個(gè)根據(jù)需求可以用 center top
background-repeat: no-repeat;
2017年6月8日 13:10
編輯回答
鹿惑

試試使用css的clip樣式

2018年7月3日 12:50
編輯回答
尐潴豬

試試這個(gè)：半深入理解CSS3 object-position/object-fit屬性

2018年5月5日 04:55