相关疑难解决方法(0)

如何自动缩放HTML5 <canvas>元素以适合页面？

例如,我可以<div>通过将height和width属性设置为100%来进行缩放,但是<canvas>不会缩放,是吗？

使用以下 css，我尝试使用附加图像作为背景图像。当我缩小浏览器时，我希望图像能够以可扩展的方式调整大小，但是，在 600 像素时，女人的头部不再可见。换句话说，CSS 不是减少图像内容的比例（即缩小），而是简单地切除图像的右侧。有没有办法在缩小浏览器尺寸时缩小图像而不是让 css 切断图像的右侧？

html {
    height: 100%;
}
body {
    font-family: Lato, sans-serif;
    color: #333;
    font-size: 15px;
    line-height: 23px;
    font-weight: 300;
}
.hero-section {
    width: 100%;
    background-image: url('./3479295472_7d97d686e4_b_couple.jpg');
    background-position: 50% 45%;
    background-size: cover;
}

<div class="hero-section">
  <div class="hero-overlay-section">
    <div class="container hero-container w-container">
    <h1 class="hero-title" data-ix="hero-fade-in" style="opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity 500ms, transform 500ms;">Jim</h1>
    <h1 class="and hero-title" data-ix="hero-fade-in-2" style="opacity: 1; transition: opacity 1500ms;">&amp;</h1>
<h1 class="hero-title" data-ix="hero-fade-in-3" style="opacity: 1; transform: translateX(0px) translateY(0px) translateZ(0px); transition: opacity …