How to make a full width image with fixed height in bootstrap?


Tags: html,css,twitter-bootstrap

Problem :

I need to make a full width image with fixed height. So I write the following code in html

<div class="marquee">

        <div class="row">
            <div class="col-lg-12">
                <img class="img-marquee" src="img/image1.jpg" alt="image 1">
            </div>

            <div class="col-lg-12">
                <img class="img-marquee" src="img/image2.jpg" alt="image 2">
            </div>
        </div>
</div>

in CSS I write the following code

.marquee {
    height: 75vh;
}

.img-marquee {
    max-width: 100%;
}

The result is full width image but not with the same height of the marquee which is 75vh. so my question how to do that in css by using bootstrap framework?



Solution :

try with :

.img-marquee {
    width: 100%;
}

    CSS Howto..

    How to Progressively highlight a chunk of text using jquery/js/css

    How to prevent dynamically appended div from overflowing?

    960 CSS Framework, how to get full 960 width?

    How to solve CSS dropdown border error?

    How do i select all nodes and apply a css style to all of them, D3

    Dropdown not showing on small screens

    How to make CSS triangles (with borders) compatible across browsers

    How to make a simple timer image slideshow using HTML and CSS

    How to make a fixed menu/sidebar while using position:relative?

    How to fade loop background images?

    knockout.js how to bind dynamic css

    How to control new line position after CSS display inline-block break

    Bootstrap Icons not showing in published ASP.NET MVC application

    How to enable bootstrap 4 flex?

    CSS: how to set screen layout according to the different dimension

    how to make content to be fixed inside scroll div using only css?

    How to disable temporary cursor with javascript?

    How to get the browser border to lock to a div when resizing?

    How do I use the Bootstrap form select css with a Rails model?

    How to Inherit grandparent CSS not parent?

    How to remove the space between list items [duplicate]

    How do I make a table show a vertical scroll bar without explicitly setting the height?

    How to add Print headers and footers in HTML, CSS and JavaScript?

    How to Dynamically Fit image in screen using css

    MaterializeCSS - Mobile Collapse menu not showing when clicked

    How to point to CSS default class using the class attribute

    How do I arrange this in CSS?

    How to get a small div bar to slide down a menu on mouseover

    How to modify CSS via JQuery

    How to detect browser support for :after and :before