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

CSS如何使圖片只放大而不會(huì)拉伸？

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

<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="點(diǎn)擊圖片左側(cè)或右側(cè)可查看下一張">
    <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

回答
編輯回答
愚念

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

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

綜上，這是一個(gè)取舍問題，不是技術(shù)問題。問一問你們的產(chǎn)品更容易解決這個(gè)問題。

開個(gè)腦洞，使用方法(1)然后用AI技術(shù)做輔助，自動(dòng)補(bǔ)全不夠的部分。
祝好。

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，并且設(shè)置background-size和background-position。

你也可以只固定高度，這樣寬度是自動(dòng)調(diào)整保持比例的。

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

2017年6月16日 03:31