前端面试题

前端面试题

如何让html中的内容不可复制

在标签中添加以下代码：

οncοntextmenu=‘return false’ 禁止右键
οndragstart=‘return false’ 禁止拖动

onselectstart =‘return false’ 禁止选中

οnselect=‘document.selection.empty()’ 禁止选中

οncοpy=‘document.selection.empty()’ 禁止复制

onbeforecopy=‘return false’ 禁止复制

οnmοuseup=‘document.selection.empty()’

css实现图片自适应宽高

css实现图片自适应容器宽高的做法一般如下所示

<style>
	div{width: 200px; height: 200px}
	div img{width: 100%; height: 100%}
</style>
<div>
	<img src="xxxx.png" />
</div>

当外层容器的宽高比跟图片宽高比一致时到没啥问题，但在一些特定的业务场景，如九宫格图片展示时，展示的原始图片它们的大小，宽高比很有可能是不一样的，但外层容器的大小是固定的。此时如果按照上面的做法会导致图片被拉伸或者压缩。为了让图片显示的自然，我们可以让图片中的一部分去填充整个容器，虽然这样做无法让图片显示完整，但也避免了因图片的拉伸或压缩导致的变形。代码如下：

转载于:https://my.oschina.net/cc4zj/blog/3005043