为了让前端图片能够随着浏览器大小的改变而自适应，可以使用CSS来设置图片的宽度和高度。具体而言，可以使用以下的CSS样式：
img { max-width: 100%; height: auto; }
这个样式将图片的最大宽度设置为100%，这样图片将会根据其容器的宽度进行缩放。同时，将高度设置为自动，这样图片的高度将根据宽度的缩放比例进行相应地调整，以保持原始的宽高比。
需要注意的是，当设置图片大小自适应时，应该尽可能地使用响应式图片，这样可以避免在不同屏幕大小和分辨率下出现模糊或拉伸的情况。可以使用一些库，如picture和srcset，来实现响应式图片的加载和调整大小。
前端背景图片大小随浏览器大小自适应
要使前端背景图片大小随着浏览器大小的改变而自适应，可以使用CSS的background-size属性。该属性控制背景图片的尺寸，并可以设置为以下值之一：
contain: 背景图片将被缩放，以适应容器的宽度或高度，并保持其原始宽高比。可能会出现背景图片在容器内垂直或水平方向上出现空白区域的情况。cover: 背景图片将被缩放，以填充整个容器，并保持其原始宽高比。这可能会导致图片的某些部分被剪裁。auto: 背景图片将按其原始大小显示，并放置在容器的左上角。
例如，如果要使背景图片自适应容器的大小并保持其原始宽高比，可以设置background-size为contain，并将背景图片的位置设置为居中：
background-image: url('your-image-url');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
这样设置后，背景图片将会随着浏览器窗口的大小而自适应，并且始终居中显示。需要注意的是，背景图片的尺寸应该足够大，以适应各种浏览器和设备的屏幕分辨率。