html - Image squashed as browser width decreases -


I am really stuck on this browser sizing issue, where every time I decrease the width of the browser, this image And then the image is not exactly right.

Here is the code:

  $ (document) .ready (function () {var myCounter = 0; $ (cycle ("break"); (Crearement, Next Element, Opts, Forward) {// Here we set the number to set the timeout for two seconds; Returning the wrong for the strange number slide, we make those slides / default timeout values ​​(4 seconds) Receive myCounter ++; return my quintor% 8; 50: 2000;}}); // ed doctor ready // cycling $ (document) begins Other functions for .ready (function () {$ (this) .find ('.llds') AddClass ('active'). Cycle ('resume');});  

I have been struggling for so long and have to do it on the website above.

   

css

  .slides {status: fix ;; Z-index: -1; Top: 0; Left: 0; Margin Top: -75px; } .slides img {status: fixed; Top: 0; Width: 100%; Z-index: -1; Margin Top: -75px; } #bigimage {width: 100%; Height: 120%; Background-position: center; Background size: cover; }  

If you set both the height and width explicitly, then this Maintain the ratio will not be able to.

What you can get by using the image as a background:

  #bgimage {background: url ('http: // www. Slynkon.com/ Alison / images / Alison% 20Levi% 203.jpg ') Any repeat center center fixed; Background-size: cover}  

Some more options:


Comments

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -