Блог

Главная - Вопросы по программированию - как применить ширину и высоту изображения к нескольким разделам?

как применить ширину и высоту изображения к нескольким разделам?

#html #css

#HTML #css

Вопрос:

Я хочу сделать ширину и высоту #card-inner и c front такими же, как ширина и высота c back изображения, есть ли какой-нибудь способ?

     <div id="card_inner" onClick={()=> set(state => !state)}>
        <a.div className="c back" style={{ opacity: opacity.interpolate(o => 1 - o), transform }} >
            <img src={image} alt={name} />
        </a.div>
        <a.div className="c front" style={{ opacity, transform: transform.interpolate(t => `${t} rotateX(180deg)`) }} >
            <div>
                <Detail 
                    name= {name}
                    id= {id}
                    updated= {updated}
                    bio= {bio}
                    portfolio= {portfolio}
                />
            </div>
        </a.div>
    </div>
  
 .c {
    position: absolute;
    cursor: pointer;
    will-change: transform, opacity;
}

Комментарии:

1. Рассмотрите возможность добавления addEventListener(‘resize, (){ /* ваш код здесь * / }), addEventListener(‘load, (){ /* ваш код здесь * / }) и переменных css с классом. После загрузки и изменения размера вы можете узнать высоту и ширину вашего ‘c back’ и назначить его переменным из javascript. вы можете использовать переменные css в своем классе или селектор css по вашему выбору для #card-inner и c front на risize

2. Спасибо за ваш быстрый ответ! Я попробую так, как вы мне сказали 🙂

3. Вы отметили вопрос HTML, но это недопустимый HTML.

Ответ №1:

блок card_inner может иметь ту же ширину / высоту, что и c back, только по умолчанию c front может иметь те же значения, установив его абсолютную позицию, заполняющую родительский элемент.

 #card_inner {
  position: relative;
}

.c.front {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}

Также, пожалуйста, удалите

 .c {
  position: absolute;
}

Комментарии:

1. Спасибо за ваш любезный ответ! Я написал position: absolute; потому что я хотел применить эффект флип-карты здесь! w3schools.com/howto/howto_css_flip_card.asp Я снова пересмотрю его в соответствии с методом, который вы мне сказали 🙂