foto houdt oorspronkelijk grootte zonder sschuifbalken

Status
Niet open voor verdere reacties.

peterbrk

Gebruiker
Lid geworden
13 sep 2011
Berichten
9
Is het mogelijk om een foto wel volledig op het scherm te laten verschijnen, maar wel zo dat wanneer de resolutie kleiner is er links en rest een gedeelte van de foto wegvalt.
Waarom? Ik heb een website met een slideshow van Jquery (flexslider). De foto's zijn 2000 bij 700 en staan in een Div element met een width van 100% en een max-width van 100% en een hoogte van 700 px. Precies zoals men bij Jquery voorschrijft.
Daaronder staat een div element met tekst.

Wanneer ik nu de resolutie verlaag dan past de breedte van de foto zich aan, aan het scherm, maar de hoogte ook. Prima, dan zijn de verhoudingen goed.
Maar omdat de hoogte kleiner wordt en de het Div element wat eromheen zit 700 px blijft, staat mijn tekst te laag. En bij elke lagere resolutie wordt dat verschil groter. Ik heb de Div boxen Absoluut gemaakt en ik weet dat dit beter Relative kan zijn. Maar ook dan werkt het ook niet omdat de foto zich binnen het Div Element verkleind.

Dus... dacht ik als tussen oplossing dat wanneer er nu links en rechts wat van de foto's wegvallen dan blijft de hoogte in ieder geval gelijk en kan ik door!

Dit is de site (nog niet af): http://www.feelinghomecuracao.com/1/index2.php

Hier wat html en CSS:


PHP:
<script src="js/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
 
    //simple FlexSlider call
    $('.flexslider').flexslider();
 
    // more complex call
    $('.flexslider').flexslider({
         animation: "slide",
         controlsContainer: ".flex-container",
         start: function(slider) {
           $('.total-slides').text(slider.count);
         },
         after: function(slider) {
           $('.current-slide').text(slider.currentSlide);
         }
    });
  });
</script>


<style type="text/css">

</style>

<!--Google Analytics Script-->

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-72806942-1', 'auto');
  ga('send', 'pageview');

</script>

<!--Einde Google Analytics Script-->

</head>

<body style="margin: 0">

<!--  Header-->
<?php include('header.incl.php'); ?>
<!--  Einde Header-->

<!--  Contact-->
<div id="contact_index"> <?php include('contact.incl.php'); ?> </div>
<!--  Einde contact-->




<!--<div id="achtergrond"></div>-->

<div id="slider">
<div id="sliderinside">
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="images/1.jpg" />
       </li>
    <li>
      <img src="images/2.jpg" />
       </li>
    <li>
      <img src="images/3.jpg" />
       </li>
    <li>
      <img src="images/4.jpg" />
       </li>
    <li>
      <img src="images/5.jpg" />
       </li>
    <li>
      <img src="images/6.jpg" />
       </li>
    <li>
      <img src="images/7.jpg" />
       </li>

 
  </ul>
  
 
</div>
</div>
</div>


<!--<div class="flexslider" style="clear:both"></div>-->

<div id="aboutus"><a href="http://www.feelinghomecuracao.com/feeling_home_curacao_about_us.php"><img alt="" src="../fotos_basic/aboutus2.png" style="margin:2px 0px 0px 5px" /></a></div>
<div id="facebook"><a href="https://www.facebook.com/feelinghomecuracao/?ref=ts&amp;fref=ts" target="_blank"><img alt="" src="../fotos_basic/facebook5.png" style="margin:2px 0px 0px 5px" /></a></div>
<div id="twitter"><a href="https://twitter.com/FCuracao" target="_blank"><img alt="" src="../fotos_basic/twitter5.png" style="margin:2px 0px 0px 5px" /></a></div>

<!------------------------------------------------------------------------------------------------------------------------------>

<div id="aboutus_henny">

<p class="tekstblok8">

<br/><img src="../fotos_basic/feeling_home_curacao_henny_geijs.jpg" alt="" title="" class="left"/> 
<span class="locatieindex22">Laat ik mij even voorstellen:</span><br/><br/>

Henny Geijs, al 25 jaar vastgoedmakelaar, waarvan 15 jaar in Spanje en 10 jaar op Cura&#231ao. 
25 jaar ervaring met een groot netwerk in deze branche.
Met mijn team doe ik de taxaties, bezichtigingen, onderhandelingen en begeleidt u met de koop/huur en verkoop/verhuur van uw woning, bedrijfspand of kavel.
Feeling Home Cura&#231ao is opgericht als Totaal Makelaar voor onroerend goed, bouw en makelaarswerk op Cura&#231ao.<br/><br/>

<span class="locatieindex22">Maar wat houdt dit in, een Totaal Makelaar?</span><br/><br/>

Onder een Totaal Makelaar verstaan wij een makelaar die staat voor een combinatie van service, enthousiasme en deskundigheid.<br/>
Maar belangrijker, een makelaar die u kan begeleiden met de aanvraag van een hypotheek, kan informeren over  fiscale zaken, zoals de Pensionadoregeling en het vestigen op de E-zone.<br/>
En wilt u een woning laten bouwen, dan kan hij u hierover adviseren en u begeleiden tijdens de bouw van de woning.<br/>
<a class="speciaal" href="../feeling_home_curacao_about_us.php">Lees meer...</a>
</p>
</div>


CSS:

#slider{ 
 z-index: 2;
 top: 160px;
 position:absolute; 
 width: 100%;
 max-width:100%;
 height:700px;
 background-color:white;
 border-top:0px maroon solid;
 border-bottom:0px maroon solid 
 }


#sliderinside{ 
 z-index: 2;
 top: 10px;
 position:absolute; 
 width: 100%;
 max-width:100%;
 height:auto;
 left:0%;
 margin:0px -5px; 
 }

#all{ 
 z-index: 5;
 position:absolute;
 top: 845px;
 left: 50%;
 height: 47px;
 background-color:white;
 width: 150px;
 margin: 0 -400px;
 }



#aboutus{ 
 z-index: 5;
 position:absolute;
 top: 845px;
 left: 50%;
 height: 47px;
 background-color:white;
 width: 150px;
 margin: 0 -400px;
 border-radius:5px;
 border:thin silver solid;
  }

#facebook{ 
 z-index: 5;
 position: absolute;
 top: 845px;
 left: 50%;
 height: 47px;
 background-color:white;
 width: 150px;
 margin: 0 -211px;
 border-radius:5px;
 border:thin silver solid;
  }

#twitter{ 
 z-index: 5;
 position: absolute;
 top: 845px;
 left: 50%;
 height: 47px;
 background-color:white;
 width: 150px;
 margin: 0 -22px;
 border-radius:5px;
 border:thin silver solid;
  }

#aboutus_henny{
 width: 529px;
 height: 390px;
 position: absolute; 
 left:50%;
 top:901px;
 margin:0 -400px;
 border: thin silver solid;
 border-radius:5px; 
 background-color:white;
 /*box-shadow:2px 2px 5px #888888;*/
 z-index: 1;
  }
  
#prices{
 width: 260px;
 height: 446px; 
 position: absolute;
 left:50%;
 top:845px;
 margin:0 138px;
 border: thin silver solid;
 border-radius:5px; 
 background-color:white;
 z-index: 5;
  }

#bord{ 
 z-index: 2;
 height: 133px; 
 width: 100px;
 position: absolute;
 background-image:url('../../fotos_basic/bord.jpg');
 top: 300px;
 left: 50%; 
 margin: 0 -40px;
 }
 
Laatst bewerkt:
Doe jezelf en de lezer een plezier en maak je bovenstaande code op met de PHP knop.... Dit leest voor geen meter en levert alleen maar een scrollarm op.
 
Staat nu goed, scrollen moet je nog steeds, weet je misschien een antwoord?

Doe jezelf en de lezer een plezier en maak je bovenstaande code op met de PHP knop.... Dit leest voor geen meter en levert alleen maar een scrollarm op.
 
Je kunt het misschien als in deze post oplossen. Voor elke browserbreedte pas je de tekst-div en afbeelding-div aan op de manier zoals je het wilt hebben.

Suc6.
 
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan