Web ressourcer | indeks | justdesign

CSS beskæring af billeder
med padding

Original: 420×200 px

Indtil videre, 4 metoder:

1 : clip 256×128px påført IMG.

2 : clip 256×128px påført DIV
• desværre, tillader clip: kun pixelværdier...

3 : width px, height px + overflow:hidden påført DIV

4 : Dynamisk (træk i vinduet!): width%, height% + overflow:auto påført DIV
• max-width: og max-height: virker ikke i IE...
• virker også uden scroll-bars med overflow:hidden.

Kode:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"> 
    <title>CLIP test</title> 
    <style type="text/css"> 
    @import "invalidPreWrapHack.css"; 
    @import "syntaxHighlight.css"; 
    @import "demoStyle.css"; 
    h1, h2    { width:420px; margin:1em auto; text-align:center; } 
    p         { width:300px; margin:.5em auto; padding:.3em 0; } span.line { display:block; padding-bottom:2px; } 
    .caption  { width:270px; padding:.2em 0; margin-bottom:2em; font-size:92%; } .caption em { background:inherit; color:maroon; } 
    /* */ 
    /* Cropping... */ 
      .box      { width:276px; height:148px; margin:1em auto 0; padding:10px; border:solid 1px gray; background:white; color:black; } 
      .box2     { width:35%; height:20%; max-width:420px; max-height:100%; } 
      .clip1-2  { clip:rect(0,276px,148px,0); position:absolute; } 
      .clip3    { width:276px; height:148px; overflow:hidden; } 
      .clip4    { width:100%; height:10%; overflow:auto; } 
    @media print { .clip4    { width:100%; height:10%; overflow:hidden; } } 
    </style> 
 
    <!--[if IE]> 
    <style type="text/css"> 
      .clip1-2 { clip:rect(0 276px 148px 0); position:absolute; } 
    </style> 
    <![endif]--> 
 
  </head> 
  <body> 
 
    <p class="hvfd"><em>Web ressourcer</em> | <a href="./">indeks</a> | <i>just</i>design</p> 
 
    <h1>CSS beskæring af billeder<br><small>med padding</small></h1> 
 
    <p style="width:100%;text-align:center;"><img src="test.jpg" width="420" height="200" alt=""></p> 
    <p class="caption" style="text-align:center;"><b>Original</b>: 420×200 px</p> 
 
    <h2>Indtil videre, 4 metoder:</h2> 
 
    <div class="box"> 
      <img class="clip1-2" src="test.jpg" alt=""> 
    </div> 
    <p class="caption"><b>1</b> : clip 256×128px påført IMG.</p> 
 
    <div class="box"> 
      <div class="clip1-2" > 
        <img src="test.jpg" alt=""> 
      </div> 
    </div> 
    <p class="caption"> 
      <span class="line"><b>2</b> : clip 256×128px påført DIV</span><br class="hidden"> 
      <em>• desværre, tillader clip: kun pixelværdier...</em></p> 
 
    <div class="box"> 
      <div class="clip3"> 
        <img src="test.jpg" alt=""> 
      </div> 
    </div> 
    <p class="caption"><b>3</b> : width px, height px + overflow:hidden påført DIV</p> 
 
    <div class="box box2"> 
      <div class="clip4"> 
        <img src="test.jpg" alt=""> 
      </div> 
    </div> 
    <p class="caption"> 
      <span class="line"><b>4</b> : Dynamisk <em>(træk i vinduet!)</em>: width%, height% + overflow:auto påført DIV</span><br class="hidden"> 
      <em><span class="line">• max-width: og max-height: virker ikke i IE...</span><br class="hidden"> 
      • virker også uden scroll-bars med overflow:hidden.</em></p> 
 
    <h2>Kode:</h2> 
    <pre class="code" id="kode"> 
<?php 
  include("./fixCode.php"); 
  include("./syntaxHighlight.php"); 
  $htmlfile = join ("", file ("./clip.html")); 
  $sc = new sourcecode; 
  echo $sc->html($htmlfile); 
?> 
    </pre> 
   <p class="hvfd">Foto: © Frank Olieu 2004 | <i>just</i>design</p> 
  </body> 
</html>

CSS beskæring af billedermed padding

Indtil videre, 4 metoder:

Kode:

CSS beskæring af billeder
med padding