BootStrap img-responsive 縮小圖片變形怎麼調劑網頁設計

<font size="4" style="overflow-wrap: break-word; color: rgb(68, 68, 68); font-family: Tahoma, "Microsoft Yahei", mingliu; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">良多人用BootStrap 圖片因寬度縮小看起來很高興 然則縮得太小的時刻，高度會達到最小高度因此無法往下縮 會造成圖片變形，如圖

網頁設計

<img aid="205860" alt="BootStrap img-responsive 縮小圖片變" class="zoom" file="data/attachment/forum/201605/03/222408qhvuvpdhkpvhmus3.png" id="aimg_205860" initialized="true" inpost="1" src="http://www.tshopping.com.tw/data/attachment/forum/201605/03/222408qhvuvpdhkpvhmus3.png" style="overflow-wrap: break-word; cursor: pointer;" title="BootStrap img-responsive 縮小圖片變" width="258" zoomfile="data/attachment/forum/201605/03/222408qhvuvpdhkpvhmus3.png" /><br style="overflow-wrap: break-word; color: rgb(68, 68, 68); font-family: Tahoma, "Microsoft Yahei", mingliu; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" /> <font size="4" style="overflow-wrap: break-word; color: rgb(68, 68, 68); font-family: Tahoma, "Microsoft Yahei", mingliu; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">於是翻了一下bootstrap.css 找到 .img-responsive 這個class 裡面插足

<div class="blockcode" style="overflow-wrap: break-word; overflow: hidden; margin: 10px 0px; padding: 10px 0px 5px 10px; background: url("http://www.tshopping.com.tw/static/image/common/codebg.gif") 0px 0px repeat-y rgb(247, 247, 247); color: rgb(102, 102, 102); zoom: 1; border: 1px solid rgb(204, 204, 204); font-family: Tahoma, "Microsoft Yahei", mingliu; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"> /* fix by woff */ min-height:0px !important; /* fix by woff */ 複製代碼

<font size="4" style="overflow-wrap: break-word; color: rgb(68, 68, 68); font-family: Tahoma, "Microsoft Yahei", mingliu; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">如許就能夠了 成功以下圖

<font size="4" style="overflow-wrap: break-word; color: rgb(68, 68, 68); font-family: Tahoma, "Microsoft Yahei", mingliu; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">演示網站 http://www.netyea.com/ <br style="overflow-wrap: break-word; color: rgb(68, 68, 68); font-family: Tahoma, "Microsoft Yahei", mingliu; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" /> <img aid="205861" alt="BootStrap img-responsive 縮小圖片變" class="zoom" file="data/attachment/forum/201605/03/222408v9e2vlwhq8uodque.png" id="aimg_205861" inpost="1" src="http://www.tshopping.com.tw/data/attachment/forum/201605/03/222408v9e2vlwhq8uodque.png" style="overflow-wrap: break-word; cursor: pointer;" title="BootStrap img-responsive 縮小圖片變" width="334" zoomfile="data/attachment/forum/201605/03/222408v9e2vlwhq8uodque.png" />

慧晟數位科技

網頁設計, 關鍵字優化, 網頁優化SEO, 網頁製作, 網路行銷