[css] 圖片裁切顯示

css

Zaku 2019-01-30 22:40:20 ‧ 1552 瀏覽

分享至

圖片通常可能設定width後，height會自動縮放，想請問在圖片寬度一樣設為width:100%時，可否柴切成特定形狀，像是長方行，可能固定切掉上下10%的高度顯示中間的區塊。如下列範例。

<style>
 .box {
     width: 900px;
     //在不限制高度的情況下柴切掉上下個10%的高度，或限制中間顯示的最高高度
 }
 .box img {
     width: 100%;
 }
</style>

<div class="box">
  <div><img src="photo"></div>
</div>

窮嘶發發發 iT邦高手 1 級 ‧ 2019-01-31 09:50:03 檢舉

參考 https://www.webdesigns.com.tw/CSS-clip.asp

Zaku iT邦新手 3 級 ‧ 2019-01-31 09:56:32 檢舉

感謝大大

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

wingkawa

iT邦新手 3 級 ‧ 2019-01-31 09:56:58

加一個遮罩?
參考看看

<style>
	.box {
		position: absolute;
		width: 900px;
		/*在不限制高度的情況下柴切掉上下個10%的高度，或限制中間顯示的最高高度*/
	}
	.box img {
		width: 100%;
	}
	.overlay-top {
		width: 100%;
		height: 10%;
		position: absolute;
		top: 0px;
		background-color: black;
	}
	.overlay-bottom {
		width: 100%;
		height: 10%;
		position: absolute;
		bottom: 0px;
		background-color: black;
	}
</style>

<div class="box">
	<div>
		<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
		<div class="overlay-top"></div>
		<div class="overlay-bottom"></div>
	</div>
</div>