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

鍍金池/ 問答/PHP  HTML/ CSS如何使圖片只放大而不會拉伸？

CSS如何使圖片只放大而不會拉伸？

我需要在一個頁面中展示許多圖片，為了整齊美觀我規(guī)定了每個img標簽的長寬，可是每張圖片的長寬比例可能是不一致的，這就導致圖片有嚴重的拉伸?？刹豢梢栽谥付╥mg標簽的長寬后，使圖片單純放大到我所設置的比例而不會拉伸？因為拉伸會使圖片嚴重變形

<div class="content">
    {volist name="list" id="vo" key="k"}
    <a  style="display: inline;"  href="__STATIC__/{$activity[$k-1]}/{$vo.md5_name}.{$vo.type}" data-lightbox="example-set" data-title="點擊圖片左側或右側可查看下一張">
    <img style="display: inline; border:2px solid white;" width="240" height="135" src="__STATIC__/{$activity[$k-1]}/{$vo.md5_name}.{$vo.type}" alt=""/></a>
    {/volist}
</div>

clipboard.png

回答
編輯回答
愚念

這個問題的核心是：圖片的長寬比例和展示框的長款比例不同。

調展示框：
  • 使用類似瀑布流或者照片墻的方式做展示，當然這是產品要考慮的事情
調圖片：
  • 兩個時間節(jié)點：上傳的時候和展示的時候。
  • 兩種方法：圖片的length/width > 展示框的length/width，這時候以length進行縮放，問題是圖片可能不會鋪滿展示框(1)，以width進行縮放，圖片會被裁掉一部分(2)。

綜上，這是一個取舍問題，不是技術問題。問一問你們的產品更容易解決這個問題。

開個腦洞，使用方法(1)然后用AI技術做輔助，自動補全不夠的部分。
祝好。

2017年4月6日 00:15
編輯回答
貓小柒

object-fit: cover

不過兼容性比 background-size 略差，不兼容 IE，兼容 Edge。

2017年9月26日 13:44
編輯回答
夏夕

使用background-image放圖片

2017年6月18日 11:56
編輯回答
尤禮

使用background背景,background-size:cover,background-position:center center

2018年5月10日 09:11
編輯回答
夢囈

如果你要固定長寬，就如上面所說的用CSS屬性background-image，并且設置background-size和background-position。

你也可以只固定高度，這樣寬度是自動調整保持比例的。

如果你出于語意的考慮（SEO等等原因），非要用img的話，你可以在外面加個容器，固定容器的寬高，然后將img定位在容器中央，再設置容器的overflow: hidden，不過img的寬高不好控制，可以考慮在加載時監(jiān)聽事件設置寬或高。

2017年6月16日 03:31