2

Excuse my ignorance and let me explain.

I would like a div to be always fully visible in a web-page. Its a div that contains a random picture and after that is a "Read more" button . So it would be nice if the image fits the div and the div and the button are always visible, when the page is fully scrolled up.

So, its the header and then the "container div". Inside the "container div", the first thing on top is that "read more" div. Not position : fixed cause this does not work well in mobiles. I guess I have to do something like 

width : 50%
height : 
get the current height of the screen - height of the header = this is where it begins
get the current height of the screen - height of the footer - height of a text - height of a button = this is where it stops

But how do I do this? The height to be a result of the screen's dimensions, and based on percent rates, so its also responsive design

Also, the div contains a random image that have to be automatically resized to fit and not get stretched.

By random I mean its maybe "portrait shaped" or maybe "landscape shaped". I read this article but setting only width:100% stretches "portrait shaped" images.

How can I fix this?

Thanks in advance

Sorry for my english.enter image description here

slevin
  • 4,166
  • 20
  • 69
  • 129
  • Could you provide a fiddle or a plunker? – hugo der hungrige Nov 10 '13 at 00:39
  • Something like this? or am I missing your point? http://jsfiddle.net/sCrAZ/ – Chad Nov 10 '13 at 00:40
  • @Chad Sorry, not like that. I dont want to use `position fixed` because I want the image to scroll along with the page. And also, `position fixed` gets buggy in mobiles. – slevin Nov 10 '13 at 00:52
  • @hugoderhungrige Not so much experienced with fiddle, I try to load images, but I cannot. Sorry... – slevin Nov 10 '13 at 01:01
  • If you dont want to use position fixed you would have to use javascript. There should be lots of jQuery plugins for what you're trying to achieve. – hugo der hungrige Nov 10 '13 at 01:07
  • @hugoderhungrige I fix the fiddle! Here you go `http://jsfiddle.net/slevin/kNgpt/`. The image and the button should always be in display, when the page is scrolled up. So they have to re-size automatically – slevin Nov 10 '13 at 01:21

1 Answers1

1

For the fixed position, you can use this solution, as posted here: What is the simplest jQuery way to have a 'position:fixed' (always at top) div?

$(window).scroll(function() {
  $('.headup').css('top', $(this).scrollTop() + "px");
});

For the image, you can use max-width:

img {
   max-width: 100%;
}

http://jsfiddle.net/9sTXa/

Community
  • 1
  • 1
hugo der hungrige
  • 12,382
  • 9
  • 57
  • 84