vue div圖片自動縮放使用max-width遇到的問題

在自適應布局中,有時候會讓圖片隨着寬度的變化相應的放大或者縮小,或者說讓圖片等比縮放,但是每個圖片的大小又不一樣,這個時候我們就要用到max-width這個屬性了。

為什么這里使用了max-width:100%，圖片還是超出了邊界沒有自動縮放？

<style lang="scss" scoped>
@import "src/style/mixin";
.productDetail{
  background: #eee; padding: 8px; margin-bottom: 1rem
}
.productDetail img{
  max-width: 100%;
}

 

 

 

原因在於

<img src="http://bztchina01.oss-cn-hangzhou.aliyuncs.com/public/uploads/1616642885524089.jpg"

是從后端動態獲取到的內容，所以在VUE中html標簽不會生成data-v-xxx屬性（vue文件中css時使用scoped標記產生的，因為要保證各文件中的css不相互影響，給每個component都做了唯一的標記，所以每引入一個component就會出現一個新的'data-v-xxx'標記）

所以我們應該將<style lang="scss" scoped>中的scoped去掉

 

如此html標簽中的data-v-xxx就不會生成了，max-width: 100%;也將圖片自動縮放，起到了他的作用。

 

 

 

 

參考：

https://www.jb51.net/article/192480.htm

https://blog.csdn.net/qq_41241767/article/details/90749217