CODEWITHSUNDEEP
twitter-bootstrap
user14584183
user14584183

Reputation: 77

Bootstrap - Change width of a <div> without changing height

Excuse me, I'm not so fond of Bootstrap, but I'm trying to change ONLY the width of my container named div class="row border border-secondary mx-auto", without resizing the height of div element and the height of content image when I include property w-50 into my class. Pic related what happens, I only want to trim of the edges on the side and basically wrap my image into that div, which will have a fixed width and height.

I played around a bit and searched around, but still don't know what else to do, other than change it to px, but then it doesn't resize proportionally when minimizing page.

    <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.sstatic.net/LeYU8.png

Upvotes: 0

Views: 817

Answers (1)

user14584183
user14584183

Reputation: 77

Found solution - basically removed the col-6 offset-3 class and added some styling to image that you'd usually use to fit an image into 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>

Upvotes: 0

Related Questions