[css]Height en Width vanuit het midden

woensdag 12 januari 2011 10:42

Acties:

0 Henk 'm!

Topicstarter

Beste tweakers, ik zit een beetje te stoeien met het resizen van een plaatje.

Ik wil dit vanuit het midden doen.
Indien men hier niet bekend mee is een uitleg:
Als je in je HTML een image hebt en je geeft in de CSS op dat dat plaatje (in px in dit geval) kleiner moet zijn.

Stel je hebt een plaatje van 500 x 500px (origineel) maar jij wilt dat het plaatje 250x250 is dan scaled CSS dat vanaf de linker bovenkant, niet vanuit het midden.

Ik wil dit dus vanuit het midden kunnen. Is hier een methode voor?

B.v.d,

woensdag 12 januari 2011 10:45

Acties:

0 Henk 'm!

Taartvarken

Dat kan niet.

Je moet het plaatje gewoon resizen naar 250 en dan met margin-left: 125px en margin-top: 125px een stukje opzij en naar beneden schuiven.

woensdag 12 januari 2011 10:49

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css

WiertOmta schreef op woensdag 12 januari 2011 @ 10:45:
Dat kan niet.

Jawel, maar is nog niet heel breed ondersteund

[edit]
Wacht, ik lees de TS verkeerd geloof ik

@BryanD: Hoe bedoel je "scaled CSS dat vanaf de linker bovenkant" precies? Heb je een testcase online staan?

[ Voor 23% gewijzigd door RobIII op 12-01-2011 10:51 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 12 januari 2011 10:52

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Css

Als alternatief kun je het als background met position gecentreerd doen. Eventueel kun je dat zelfs middels javascript rewriten van img-tags naar div's met background bijvoorbeeld.

woensdag 12 januari 2011 11:16

Acties:

0 Henk 'm!

BryanD

Topicstarter

@Rob:

ik bedoel dat als je in je css opgeeft dat het 250x250px moet zijn hij van rechter en onder-kant 250px afhaalt, ipv.dat 125px van alle kanten afgehaald word, en dat laatste dat wil ik graag.

edit: hoeft overigens niet breed ondersteund te worden, is een site die alleen maar lokaal draait en bekeken word in chrome, dus alleen chrome

[ Voor 26% gewijzigd door BryanD op 12-01-2011 11:17 ]

woensdag 12 januari 2011 11:18

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Css

BryanD schreef op woensdag 12 januari 2011 @ 11:16:
@Rob:

ik bedoel dat als je in je css opgeeft dat het 250x250px moet zijn hij van rechter en onder-kant 250px afhaalt, ipv.dat 125px van alle kanten afgehaald word, en dat laatste dat wil ik graag.

Dat doet ie niet als je een afbeelding resized. Dat doet ie wel als je een element met achtergrond resized en je de positionering op top/left hebt staan.

Geef eens een voorbeeld, want het wordt er niet veel duidelijker op.

woensdag 12 januari 2011 11:20

Acties:

0 Henk 'm!

Tim_R

Dan kan je of een Javascript-based oplossing gebruiken (wanneer je niet weet hoe hoog/breed de afbeelding is) of (als je dat wel weet) een object maken, de afbeelding als background instellen en de background-position zo construeren dat het plaatje in het midden staat.

Alternatief kan je de CSS3-properties gebruiken die RobIII aandraagt, maar vanzelfsprekend ondersteunt IE7 en 8 dat sowieso niet.

Edit: Zie nu je edit, aangezien Chrome CSS3 ondersteunt is

code:

object {
  object-fit: cover;
  overflow: hidden;
}

the way to go

[ Voor 15% gewijzigd door Tim_R op 12-01-2011 11:23 ]

woensdag 12 januari 2011 11:21

Acties:

0 Henk 'm!

Verwijderd

BryanD schreef op woensdag 12 januari 2011 @ 11:16:

ik bedoel dat als je in je css opgeeft dat het 250x250px moet zijn hij van rechter en onder-kant 250px afhaalt, ipv.dat 125px van alle kanten afgehaald word, en dat laatste dat wil ik graag.

Nee, je had het zelf over scalen. Daarbij wordt er helemaal niks van een afbeelding afgehaald. Zoals zo vaak het geval is ontstaat dit probleem doordat je woorden uit het jargon verkeerd gebruikt. Zeg voortaan eerst wat je wilt bereiken. Maak het anders gewoon duidelijker met een plaatje.

Ik ga mee met Bosmonster.

woensdag 12 januari 2011 11:25

Acties:

0 Henk 'm!

BryanD

Topicstarter

code:

<html>
 <head>
 <style type="text/css">
  #container { position: absolute; left: 500px; top: 500px; height: 500px; width: 500px;}
  img { height: 250px; width: 250px; position: absolute; }
 </style>
 </head>
 <body>
 <div id=container">
  <img src="plaatje.jpg" alt="test">
 </div>
 </body>
</html>

plaatje.jpg = 500px bij 500px;

De div staat (als voorbeeld) 500 van links en van top.
Als je de css van de image weglaat is zowel het plaatje als de div dus 500px hoog en breed.
Als je de css van de image dan toevoegt dan komt het plaatje vervolgens in de linker bovenhoek te staan van de div #container. Ik wil dit gecenterd hebben, ik weet dat dit kan met left: bla bla en margin-left: - bla bla, maar dat is me te omslachtig. Het plaatje moet dus gewoon gecenterd blijven, en moet dan gewoon gescaled kunnen worden, zonder dat ik met negatieve margin's en left's moet gaan werken.

Hoop dat het nu wat duidelijker is

@cheetah, er af halen is eigenlijks verkeerd, het moet gewoon dat gehele plaatje blijven (word niet getrimt) alleen moet het gescaled wordne, dus 125px kleiner aan alle kanten...dat had waarschijnlijk duidelijker geweest

[ Voor 10% gewijzigd door BryanD op 12-01-2011 11:28 ]

woensdag 12 januari 2011 11:47

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Css

Het gaat dus om een img binnen een div die je resized, niet om het scalen van de afbeelding.

De enige manier om dit fatsoenlijk te bereiken is om de afbeelding als achtergrond in te stellen op de div (zoals al paar keer gezegd).

edit: na nog een keer lezen... je wilt dus gewoon de afbeelding centreren binnen de div. Kan ook met vertical-align middle/text-align center en wat gepiel. Zal niet helemaal crossbrowser werken, anders moet het met een achtergrond of javascript.

[ Voor 35% gewijzigd door Bosmonster op 12-01-2011 11:49 ]

woensdag 12 januari 2011 11:55

Acties:

0 Henk 'm!

BryanD

Topicstarter

Background neem ik aan dat je bedoelt:

code:

1	div { background: url("pad/naar/img.jpg") center; height: 250px; 250px; }

en dat werkt niet, dan snijd hij de afbeelding gewoon af.
Ik wil niet de afbeelding binnen de div centreren, niet alleen.

Kijk het voglende effect moet bereikt worden:

- Stap 1: foto is naar 50% gescaled (250px x 250px)
- Stap 2: foto word naar 100% gescaled( 500px x 500px (originele grote))
- Stap 3: foto word weer naar 50% gescaled (250px x 250px)

En de foto moet ten allertijden zijn pivot point in het midden hebben. Dat het scalen dus vanuit de hoeken naar het midden gebeurt ipv vanuit de rechter onderkant naar de linker bovenkant.

woensdag 12 januari 2011 12:16

Acties:

0 Henk 'm!

Verwijderd

HTML:

1
2
3

<div class="bump">
    <img src="path/to/img.jpg" alt="">
</div>

Cascading Stylesheet:

.bump {
    position: relative;
    width: 250px;
    height: 250px;
}
.bump img {
    position: absolute;
    width: 250px;
    height: 250px;
    margin: 0;
}
    .bump:hover img {
        width: 500px;
        height: 500px;
        margin: -125px;
    }

Getest en werkt.

woensdag 12 januari 2011 20:45

Acties:

0 Henk 'm!

Peter

Timmyboy_ schreef op woensdag 12 januari 2011 @ 11:20:
Edit: Zie nu je edit, aangezien Chrome CSS3 ondersteunt is
code:
1
2
3
4
object {
  object-fit: cover;
  overflow: hidden;
}
the way to go

Over ongeveer een week zal "-webkit-object-fit" pas in WebKit terecht komen, pak 'm beet een week later in de dev-versie van Chrome. Hoogstwaarschijnlijk zit de development-cycle dan op Google Chrome 11, waarvan de Stable versie midden april uit zal komen. Dat duurt nog wel even.

Alleen Opera 11 ondersteund (-o-)object-fit, andere browsers zullen vanzelf gaan volgen.

woensdag 12 januari 2011 21:36

Acties:

0 Henk 'm!

Tim_R

Peter schreef op woensdag 12 januari 2011 @ 20:45:
[...]

Over ongeveer een week zal "-webkit-object-fit" pas in WebKit terecht komen, pak 'm beet een week later in de dev-versie van Chrome. Hoogstwaarschijnlijk zit de development-cycle dan op Google Chrome 11, waarvan de Stable versie midden april uit zal komen. Dat duurt nog wel even.

Alleen Opera 11 ondersteund (-o-)object-fit, andere browsers zullen vanzelf gaan volgen.

Okeej, my bad! Ik draai inderdaad altijd de (soms hoog-instabiele) devbuild van Chrome, dus ik kijk ernaar uit

woensdag 12 januari 2011 23:03

Acties:

0 Henk 'm!

Klaasvaak

Is dit wat?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<style>
div {
 width: 500px;
 height: 500px;
 background: #ccc;
 text-align: center;
 line-height: 500px;
}
img {
 width: 250px;
 vertical-align: middle;
}
</style>
</head>

<body>
<div><img src="#"></div>
</body>
</html>

vrijdag 14 januari 2011 15:01

Acties:

0 Henk 'm!

Verwijderd

@Klaasvaak: gaat niet werken niet...

Mijn oplossing werkt wel #35352108

Onderwerpen