css图片和按钮自适应

随着移动设备的普及，各种尺寸的显示屏出现在人们的眼前。如何让网站的图片和按钮在不同设备上都能够适应，成为了前端开发中的一个重要问题。在这里，我们将介绍如何使用 CSS 相关属性来实现图片和按钮的自适应。

图片自适应

    /* 图片自适应 */
    .img-responsive {
      max-width: 100%;
      height: auto;
    }

上面的 CSS 代码使用了类名为 "img-responsive" 的选择器，对该类名下的图片进行自适应调整。其中，将图片的最大宽度设置为 100%，使其根据容器大小进行自适应，同时将图片高度设置为自适应。通过这样的设置，可以让图片在不同设备上都能够自适应，不会被拉伸或变形。

按钮自适应

    /* 按钮自适应 */
    .btn {
      width: 100%;
      max-width: 200px;
      padding: 10px;
      font-size: 16px;
      border-radius: 5px;
      text-align: center;
    }

上面的 CSS 代码使用了类名为 "btn" 的选择器，对该类名下的按钮进行自适应调整。其中，将按钮的宽度设置为 100%，使其根据容器大小进行自适应，同时设置一个最大宽度，防止按钮过大或者过小。将按钮的内边距 padding 设置为一个固定大小，保证按钮内部元素的间距不会改变。调整按钮的字体大小和圆角边框，使其在不同设备上都能够呈现出较好的样式。

以上就是 CSS 代码实现图片和按钮自适应的方法。通过对 CSS 相关属性的灵活运用，可以使得网站设计在不同设备上都呈现出良好的效果，提升用户体验。