Блог

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

Как изменить размер отображаемого компонента в react

#javascript #html #css #reactjs #web

#javascript #HTML #css — файл #reactjs ( реакция ) #паутина #reactjs #веб

Вопрос:

У меня есть этот компонент на веб-сайте react, над которым я работаю. Это iframe, созданный с использованием walls.io .

Стена

Это и есть код:

 import React from 'react';
import './Home.css';

const Wall = ({src}) => {
    return (
        <div className='container'>
            <iframe
                className="responsive-iframe"
                allowFullScreen id="wallsio-iframe"
                src={src}
                loading="lazy"
                title="My social wall">
            </iframe>

        </div>
    );
}

export default Wall;

Я хочу изменить размер этого компонента и добавить его в карточный компонент. Но когда я делаю это, я хочу, чтобы размер всего самого компонента был изменен (изображения и текст должны стать меньше) вместо изменения размеров компонента.
Это текущее состояние карты :

Карточка

Я хочу, чтобы весь предыдущий экран поместился внутри этой карты. Есть ли какой-либо способ, возможно, «предварительно отобразить» компонент или любые другие решения? Заранее благодарю. Приношу извинения за длинноту вопроса.

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

1. Похоже, что он изменяется. Но полоса прокрутки iframe отображается по умолчанию — вы всегда можете отключить ее. Также проблематично, что этот компонент все же содержит идентификатор — это означает, что вы не можете (не должны) использовать его повторно. Примечательно: iframes довольно тяжелы для простого отображения изображения — вы уверены, что не хотите просто отобразить изображение вместо этого?

2. Я пытаюсь получить публикации в СМИ из моего профиля Instagram и отобразить их в виде сетки на моем веб-сайте. Я использую walls. ввод-вывод для того же. Я заглянул в любой API, предоставляемый Instagram, и единственное, что я нашел, это Facebook Graph API, который действительно сбивал с толку. Я довольно новичок в этом, поэтому был бы признателен за любые предложения о том, как достичь того, к чему я стремлюсь.

3. И, как вы сказали, размер компонента в некоторой степени изменяется, но я много пытался возиться, и все же, похоже, я не могу получить результат, на который я надеюсь. Я хочу, чтобы в этой карточке помещалось не менее 4 записей. Я пытаюсь выяснить, есть ли способ уменьшить содержимое iframe вместе с компонентом.

4. figure out if there is a way to have the contents of the iframe be shrunk along with the component — ответ: нет. Вы (ваш компонент) не можете контролировать то, что находится в iframe. Это гораздо лучше делать с изображениями. Iframes — неправильное направление.

5. Я понимаю. Спасибо за ваш ответ. Я действительно ценю это. Но есть ли способ, чтобы содержимое iframe оставалось неизменным, но сам компонент уменьшался в размере? Под этим я подразумеваю, что компонент остается неизменным, за исключением того, что его размер полностью уменьшается. Надеюсь, я не слишком запутываю.

Ответ №1:

Я не уверен, что это решение, которое вы ищете, но в любом случае вот оно:

попробуйте использовать свойство масштабирования css:

 
.container {
  width: 750px;   //you can always adjust
  height: 1500px; //you can always adjust
  padding: 0;     
  overflow: hidden;
}


.responsive-iframe {
  zoom: 0.75;
  -moz-transform: scale(0.75);
  -moz-transform-origin: 0 0;
  -o-transform: scale(0.75);
  -o-transform-origin: 0 0;
  -webkit-transform: scale(0.75);
  -webkit-transform-origin: 0 0;
}

Если это кажется уместным, вот полное объяснение