Сжатие изображения по размеру div вместо расширения div по размеру

ProgramBox

Сжатие изображения по размеру div вместо расширения div по размеру

Post author:admin
Запись опубликована:14 января, 2022
Post category:Вопросы по программированию

#css

Вопрос:

У меня есть CSS с четырьмя строками, каждая из которых содержит answer_button и флажок div. Это выглядит именно так, как я хочу, за исключением того, что, когда я добавляю изображение флажка, оно растягивает другие дивы. Я пробовал добавлять рамку, наследовать высоту, изменять строки шаблона сетки на 25% 25% 25% 25%, подгонку объектов: содержать и все другие способы, которые я могу придумать или найти в Интернете.

Это код, если вы раскомментируете checkbox_image_1-checkbox_image_4 на JavaScript, вы увидите, что я имею в виду. Может ли кто-нибудь помочь мне выяснить, как заставить флажки уменьшаться, чтобы соответствовать дивам, сохраняя при этом соотношение сторон?

Вот рабочий кодовый набор: https://codepen.io/TheNomadicAspie/pen/abWwejZ

И вот прямой код:

 <div id="screen" class="screen">
  <div id="menu_bar" class="menu-bar">
    <div id="logo" class="logo">
      <img id="logo_image">
    </div>
    <div id="title" class="title">Title</div>
    <div id="menu_button" class="menu-button">
      <img id="menu_image">
    </div>
  </div>
  <div id="display" class="display">
    <div id="speech_bubble" class="speech-bubble">
      <div id="logo_animation" class="logo-animation">
        <img id="logo_animation_image">
      </div>
      <div id="question" class="question resize">
        <div id="question_text" class="question-text">
          <span>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem
            ipsum.
            Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem
            ipsum.
            Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem
            ipsum.
            Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.
          </span>
        </div>
      </div>
      <div id="speech_bubble_middle_bar" class="speech-bubble-middle-bar">
        <input type="text" id="input-text" class="input-text" />
      </div>
      <div id="speech_bubble_bottom_bar" class="speech-bubble-bottom-bar">
        <div id="left_button_container" class="left-button-container">
          <button id="left_button" class="button resize">Wow!</button>
        </div>
        <div id="right_button_container" class="right-button-container">
          <button id="right_button" class="button resize">Next</button>
        </div>
      </div>
    </div>
    <div id="bottom_bar" class="bottom-bar">
      <div id="character" class="character">
        <img id="character_image">
      </div>
      <div id="bottom_display" class="bottom-display">
        <div id="answers_display" class="answers-display">
          <div id="answer_container_1" class="answer-button-1">
            <div id="answer_checkbox_1" class="checkbox">
              <img id="answer_checkbox_1_image" class="checkbox-image">
            </div>
            <div id="answer_button_container_1" class="answer-button-container">
              <button id="answer_button_1" class="button pushable resize">
                <span></span>
              </button>
            </div>
          </div>
          <div id="answer_container_2" class="answer-button-2">
            <div id="answer_checkbox_2" class="checkbox">
              <img id="answer_checkbox_2_image" class="checkbox-image">
            </div>
            <div id="answer_container_2" class="answer-button-container">
              <button id="answer_button_2" class="button pushable resize">
                <span></span>
              </button>
            </div>
          </div>
          <div id="answer_container_3" class="answer-button-3">
            <div id="answer_checkbox_3" class="checkbox">
              <img id="answer_checkbox_3_image" class="checkbox-image">
            </div>
            <div id="answer_container_3" class="answer-button-container">
              <button id="answer_button_3" class="button pushable resize">
                <span></span>
              </button>
            </div>
          </div>
          <div id="answer_container_4" class="answer-button-4">
            <div id="answer_checkbox_4" class="checkbox">
              <img id="answer_checkbox_4_image" class="checkbox-image">
            </div>
            <div id="answer_container_4" class="answer-button-container">
              <button id="answer_button_4" class="button pushable resize">
                <span></span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

 * {
  outline: none;
  opacity: 1;
  -webkit-box-sizing: border-box;
  -mo-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  position: fixed;
  height: 100%;
  background-color: #311049;
  font-size: 2vh;
  margin: 0 auto;
  visibility: hidden;
}

.screen {
  position: absolute;
  height: 100%;
}

.menu-bar {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  position: relative;
  height: 13.714%;
  width: 100vw;
  top: 0%;
  text-align: center;
}

.logo {
  grid-column: 1/2;
  position: relative;
  height: 100%;
}

.logo img {
  position: absolute;
  height: auto;
  max-height: 95%;
  max-width: 95%;
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
}

.title {
  grid-column: 2/3;
  position: relative;
  color: #f5f5f5;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-family: hack;
  font-size: clamp(2vw, 8vw, 10vh);
  display: flex;
  top: 0%;
}

.menu-button {
  grid-column: 3/4;
  position: relative;
  height: 100%;
}

.menu-button img {
  position: absolute;
  height: auto;
  max-height: 75%;
  max-width: 75%;
  left: 50%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  transform: translate(-50%, -50%);
}

.display {
  position: relative;
  height: 86.286%;
  width: 100vw;
}

.speech-bubble {
  display: grid;
  grid-template-rows: 80% 0% 20%;
  position: relative;
  background-color: #f5f5f5;
  height: 61.8%;
  width: 90vw;
  margin: auto;
  border-radius: 2em;
  z-index: 10;
  padding-bottom: 1em;
}

.speech-bubble:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15vw;
  width: 0;
  height: 0;
  border: 4em solid transparent;
  border-top-color: #f5f5f5;
  border-bottom: 0;
  margin-left: -2em;
  margin-bottom: -2em;
  z-index: -1;
}

.logo-animation {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: center;
  padding-bottom: 10%;
  padding-top: 10%;
  padding-left: 10%;
  padding-right: 10%;
  opacity: 0;
}

.show {
  display: flex;
}

.logo-animation.fadein {
  opacity: 1;
}

.logo-animation.fadeout {
  opacity: 0;
}

.logo-animation img {
  height: 100%;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

.question {
  grid-row: 1/2;
  position: relative;
  font-size: 3vh;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.question-text {
  height: 100%;
  overflow: auto;
  word-break: break-word;
  position: relative;
}

.speech-bubble-middle-bar {
  grid-row: 2/3;
  padding-left: 1%;
  padding-right: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  height: 100%;
}

.input-text {
  visibility: hidden;
  width: 100%;
  height: 100%;
  border-radius: 2.5em;
  border: 0.25em solid black;
  padding: 1%;
  font-size: 2em;
  text-align: center;
}

.speech-bubble-bottom-bar {
  grid-row: 3/4;
  display: grid;
  grid-template-columns: 50% 50%;
  position: relative;
  width: 100%;
}

.left-button-container {
  position: absolute;
  height: 100%;
  width: 38.2%;
  left: 0%;
  margin-left: 1em;
}

.left-button-container button {
  width: 100%;
}

.right-button-container {
  position: absolute;
  height: 100%;
  width: 38.2%;
  right: 0%;
  margin-right: 1em;
}

.right-button-container button {
  width: 100%;
}

.bottom-bar {
  display: grid;
  grid-template-columns: 38.2% 61.8%;
  position: relative;
  height: 38.2%;
  width: 100vw;
  bottom: 0%;
}

.character {
  grid-column: 1/2;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-y: bottom;
  background-position-x: center;
  margin-left: 4%;
  margin-right: 4%;
  margin-top: 3em;
}

.character img {
  position: absolute;
  max-height: 80%;
  max-width: 90%;
  bottom: 0%;
  margin-left: 4%;
  margin-right: 4%;
}

.bottom-display {
  grid-column: 2/3;
  position: relative;
  height: 100%;
  padding-right: 5vw;
  padding-top: 1%;
  padding-bottom: 3%;
}

.answers-display {
  display: none;
  gap: 1%;
  height: 99%;
  max-height: 99%;
  grid-template-columns: repeat(
    auto-fill,
    minmax(clamp(28vw, 45vmin, 35vw), 1fr)
  );
  grid-template-rows: 25% 25% 25% 25%;
  height: 100%;
  background-color: black;
}

.answer-button-1 {
  grid-row: 1/2;
  display: grid;
  grid-template-columns: 20% 80%;
  height: 98%;
}

.answer-button-2 {
  grid-row: 2/3;
  display: grid;
  grid-template-columns: 20% 80%;
  height: 98%;
}

.answer-button-3 {
  grid-row: 3/4;
  display: grid;
  grid-template-columns: 20% 80%;
  height: 99%;
}

.answer-button-4 {
  grid-row: 4/5;
  display: grid;
  grid-template-columns: 20% 80%;
  height: 99%;
}

.checkbox {
  grid-column: 1/2;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.checkbox-image {
  height: 100%;
}

.answer-button-container {
  grid-column: 2/3;
  padding-left: 5%;
  height: 100%;
}

.answer-button-container button {
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 2%;
  padding-bottom: 2%;
}

.button {
  display: none;
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #311049; /*Button Color*/
  color: #f5f5f5;
  font-family: hack;
  font-size: 1.5rem;
  font-size: min(6vw, clamp(1rem, 4.5vh, 4rem));
  border-radius: 20px;
  text-decoration: none;
  box-shadow: 0.1em 0.2em black;
  transition: 0.2s;
}

.active {
  transition: 0.1s;
  box-shadow: 0.01em 0.02em black;
  transform: translate(0.05em, 0.1em);
}

.button:active {
  transition: 0.1s;
  box-shadow: 0.01em 0.02em black;
  transform: translate(0.05em, 0.1em);
}

.button:focus .button:hover {
  box-shadow: 0.06em 0.12em black;
  transform: translate(-0.01em, -0.02em);
}

.left-btn::after {
  display: block;
  color: #f5f5f5;
  line-height: 0.5em;
  content: "2190";
}

.right-btn::after {
  display: block;
  color: #f5f5f5;
  line-height: 0.5em;
  content: "2192";
}

.fade {
  opacity: 0;
}

 const left_button = document.getElementById('left_button')
const right_button = document.getElementById('right_button')
const question = document.getElementById('question')
const input_text = document.getElementById('input-text')
const menu_button = document.getElementById('menu_button')
const answers_display = document.getElementById('answers_display')
const answer_button_1 = document.getElementById('answer_button_1')
const answer_button_2 = document.getElementById('answer_button_2')
const answer_button_3 = document.getElementById('answer_button_3')
const answer_button_4 = document.getElementById('answer_button_4')
const answer_checkbox_1 = document.getElementById('answer_checkbox_1')
const answer_checkbox_2 = document.getElementById('answer_checkbox_2')
const answer_checkbox_3 = document.getElementById('answer_checkbox_3')
const answer_checkbox_4 = document.getElementById('answer_checkbox_4')
const answer_checkbox_1_image = document.getElementById('answer_checkbox_1_image')
const answer_checkbox_2_image = document.getElementById('answer_checkbox_2_image')
const answer_checkbox_3_image = document.getElementById('answer_checkbox_3_image')
const answer_checkbox_4_image = document.getElementById('answer_checkbox_4_image')
const character = document.getElementById('character')
const character_image = document.getElementById('character_image')
const question_text = document.getElementById('question_text')
const speech_bubble_middle_bar = document.getElementById('speech_bubble_middle_bar')
const speech_bubble_bottom_bar = document.getElementById('speech_bubble_bottom_bar')
const logo_animation = document.getElementById('logo_animation')
const speech_bubble = document.getElementById('speech_bubble')
const logo = document.getElementById('logo')
const logo_image = document.getElementById('logo_image')
const menu_image = document.getElementById('menu_image')
const logo_animation_image = document.getElementById('logo_animation_image')
const title = document.getElementById('title')

var answer_checkbox_dict = {
    '1': answer_checkbox_1,
    '2': answer_checkbox_2,
    '3': answer_checkbox_3,
    '4': answer_checkbox_4
}

showPsyche()

function showPsyche() {
    logo.style.visibility = 'hidden'
    logo.style.opacity = 0
    title.style.visibility = 'hidden'
    title.style.opacity = 0
    var button_array = document.getElementsByClassName("button")
    speech_bubble.style.visibility = 'hidden'
    speech_bubble.style.opacity = 0
    character.style.visibility = 'hidden'
    character.style.opacity = 0
    showButton(left_button, 'Wow', handleStart)
    showButton(right_button, 'Next', handleStart)
    setTimeout(() => {
        logo_image.src = 'https://i.imgur.com/bhH5xNB.png'
        menu_image.src = 'https://i.imgur.com/l6GysYf.png'
        logo_animation_image.src = 'https://media2.giphy.com/media/E0SE1bDv0sTbCH4p6V/giphy.gif?cid=790b761143fe1cebe2466c26bfb82fc6b178eb7ecad3874eamp;rid=giphy.gif'
  character_image.src = 'https://i.imgur.com/6zX8FA2.png'
        //answer_checkbox_1_image.src = 'https://i.imgur.com/WfcJWEL.png'
        //answer_checkbox_2_image.src = 'https://i.imgur.com/WfcJWEL.png'
        //answer_checkbox_3_image.src = 'https://i.imgur.com/WfcJWEL.png'
        //answer_checkbox_4_image.src = 'https://i.imgur.com/WfcJWEL.png'
    }, 100)
    setTimeout(() => {
        fadeIn(logo)
        fadeIn(menu_button)
        menu_button.onclick = handleStart
        fadeIn(title)
        fadeIn(speech_bubble)
        fadeIn(character)
        for (var i = 0, length = button_array.length; i < length; i  ) {
            button_array[i].style.display = 'inline-block'
        }
        answers_display.style.display = 'grid'
        answers_display.style.visibility = 'visible'
    }, 200)
    showCheckboxes()
    checkboxesResponsive()
    //setTimeout(() => {
    //showLogoAnimation()
    //}, 1000)
}

function showButton(button, text, button_function) {
    button.innerText = text
    button.onclick = button_function
    fadeIn(button)
}

function handleStart() {
}

function fadeIn(element, time = '.25s') {
    console.log('fading in ', element, ' for ', time)
    element.style.transition = time
    element.style.opacity = '1'
    element.style.visibility = 'visible'
}

function showCheckboxes() {
    for (let [k, v] of Object.entries(answer_checkbox_dict)) {
        v.src = 'https://i.imgur.com/WfcJWEL.png'
    }
}

function checkboxesResponsive() {
    for (const [key, checkbox_object] of Object.entries(answer_checkbox_dict)) {
        checkbox_object.onclick = function () {
        }
    }
}

Перед раскомментированием флажков:

После раскомментирования флажков:

Ответ №1:

Я смог решить эту проблему, установив фоновое изображение вместо изображения src.

Метки: Сжатие изображения по размеру div вместо расширения div по размеру

Вопрос:

Ответ №1:

Вам также может понравиться

Нужна помощь в взломе алгоритма A* (звезда) в python

Как показать всплывающее окно при нажатии?

Создание элемента управления, видимого для hit-testing, но прозрачного для drag