在线观看不卡亚洲电影_亚洲妓女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-sizebackground-position。

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

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

2017年6月16日 03:31