How to enlarge an image horizontally in css?


Tags: jquery,html,css

Problem :

I have a <td> in a <table>, where I have an image in it. When the screen is re-sized using ctrl+mousewheel, the image has to be enlarged horizontally to fit the screen. I should not use background:repeat-x property and the width should be 15%; if I re-size, it should be enlarged horizontally.

html:

<td id="rightBanner">

css:

#rightBanner{
    background-image:url('../images/rightbanner.png');
    width:15%;
    height:95px;
    align:right;
}

Thankyou.



Solution :

you could do it this way:

  1. setup width on container table,
  2. setup "display: block" on the td
  3. setup "background-size: 100% 100%" for the image

Here is the code:

CSS:

#container-table{
    width:100%;
}

#rightBanner{
   display:block;
   background-image:url('../images/rightbanner.png');
   background-size: 100% 100%;
   width:15%;
   height:95px;
}

HTML:

<table id="container-table">
    <tr>
        <td id="rightBanner"></td>
    </tr>
</table>

Here is a working example. Hope this helps.


    CSS Howto..

    How to overlay/overlap two div's designed with css to look like text bubbles?

    How to transform a production to LL(1) for a list separated by a semicolon?

    How to strike through obliquely with css showing the text on top of the strike through

    Unsure how to use border-bottom in CSS

    How to apply css to an iframe

    How to center this on screen

    How to get CSS class property in Javascript?

    How to change floating div's width to fill all the space they occupy?

    CSS Border-Radius Shows Parent's Style

    How to scroll a div inside another div?

    how to make a timeline using html, css, javascript?

    How to right align a flipswitch in jquery mobile 1.4.5

    How do you change the font-size of a custom css style?

    Customizing ebay store HTML and CSS code (How to?)

    How to test .css file for syntax errors?

    How do I keep my footer at the bottom of the page without it coming up automatically to fill space if there is little content?

    CSS: how to cascade class-specific style to children [closed]

    How to set font family and size in html/css

    How can I get list of all element css attributes with jQuery?

    How do i remove li element margin

    How to override group of css class?

    How to make CSS menu to open menu in in up direction rather than default down direction

    how to have the text under the logo css

    How to change the color of item selection radcombobox with a css style?

    CSS - How to make a div's padding not affect the positioning of the div below it

    How can i make 3 independently scrollable columns

    How to place a responsive background according to content height with HTML / CSS?

      list only showing contents of first
    • , ignoring second

    How to dynamically change CSS using JS

    When using CSS transformation, how to avoid an element to overflow its parent?