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
Post a Comment