Блог

Главная - Вопросы по программированию - Начальная загрузка — Изменение ширины без изменения высоты

Начальная загрузка — Изменение ширины без изменения высоты

#twitter-bootstrap

Вопрос:

Извините, я не очень люблю Bootstrap, но я пытаюсь изменить ТОЛЬКО ширину моего контейнера с именем div class=»граница строки граница-вторичный mx-авто», без изменения высоты элемента div и высоты изображения содержимого, когда я включаю свойство w-50 в свой класс. На рисунке показано, что происходит, я хочу обрезать только края сбоку и в основном обернуть свое изображение в этот div, который будет иметь фиксированную ширину и высоту.

Я немного поиграл и поискал, но все еще не знаю, что еще можно сделать, кроме как изменить его на px, но тогда он не изменяется пропорционально при сворачивании страницы.

     <div class="row border border-secondary mx-auto">
            <div class="col-6 offset-3">
                <a href="/profile/{{ $post->user->id }}">
                    <img src="/storage/{{ $post->image }}" class="w-100">
                </a>
            </div>
    </div>

https://i.imgur.com/rSi1FBD.png

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

1. Привет, если вы можете предоставить свой CSS-код, который поможет. Если div у вас фиксированные высота и ширина, попробуйте сделать размеры изображения со 100% высотой и шириной, чтобы они соответствовали контейнеру. Я предполагаю, что в соответствии с предоставленным вами кодом, когда вы добавили w-100 класс для изображения, он также устанавливает height автоматическую настройку в зависимости от ширины изображения. Таким образом, вы также можете попытаться ограничить высоту изображения.

2. Я думаю, что это в основном просто загрузочный CDN — .строка { дисплей: гибкий; гибкий перенос: перенос; поле справа: — 15 пикселей; поле слева: -15 пикселей; }

3. Я говорил об изображении внутри div. Он имеет только класс ширины в соответствии с вашим кодом, укажите для него высоту и сообщите нам, сработало ли это.

4. Я нашел ответ и опубликовал его ниже.

Ответ №1:

Найдено решение — в основном удален класс смещения col-6-3 и добавлен некоторый стиль изображения, который вы обычно используете для размещения изображения в div.

 <div class="row border border-secondary mx-auto w-50">
            <div>
                <a href="/profile/{{ $post->user->id }}">
                    <img style="
                       max-width: 100%; 
                       max-height: 100%; 
                       display: block; 
                       height: 600px;"

                    src="/storage/{{ $post->image }}">
                </a>
            </div>
</div>
Метки: