この解答例はChatGPTによって生成されています,正しいかは自己判断で。

BFE.devでのAI解答例 - CSS 質問
11. fit the image

.image { width: 100%; height: 0; padding-bottom: 25%; /* 4:1 aspect ratio */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E .text %7B font: 60px sans-serif; fill: %23fff; %7D %3C/style%3E%3Crect width='100%25' height='100%25' fill='%23f44336' /%3E%3Ctext x='50' y='60' class='text'%3EBFE.dev%3C/text%3E%3C/svg%3E"); background-size: cover; background-position: center; }