Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

[LÖST][html/js/css?] få bilder att anpassa sig efter fönstrets storlek.

1
Skriv svar
Permalänk
Medlem
●

[LÖST][html/js/css?] få bilder att anpassa sig efter fönstrets storlek.

kort sagt nu.

jag måste bara veta vilken metod man ska använda för bilderna ska följa efter.

Just nu så har jag bara anpassat det för för chrome är maximerat och inte minimerat verkar det som. Minimerar jag fönstret (chrome) så är texten bra men bilderna hamnar ju på helt fel ställe :c jag vill att bilderna ska följa efter och att det ska se ut exakt som när chrome var maximerat som när jag minimerat det.

ex. om du har sweclockers i maximerat läge och sedan minimerar det så kommer texten att anpassa sig efter fönstrets storlek med " sök innehåll " skulle vara kvar och inte anpassa sig alls. ( i mitt fall så är det en bild istället för "sök innehåll"

hoppas ni förstår och tack!

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem ★
●

sätt width: 100%; på bilden.

Exempel:
http://jsfiddle.net/EpvM4/

EDIT: Läste det du skrev igen, och jag har nog inte riktigt fattat vad du är ute efter. Din text är förbaskat luddig.
Har du problem med "float" ?

Senast redigerat
Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem
●

Sweclockers hemsida varierar sig då inte mycket, i forumet är det ett wrapper-element som är width:100% som gör innehållet (texten) ändrar sig när rutan minskas till en min-width skulle jag tro. Sökfältet, och allting ovan forumet ligger i en annan wrapper som är min-width: 999px och varken blir större eller mindre än så, vilket gör allting statiskt och enkelt kontrollera hur det ligger oavsett webbläsarstorlek, dock skapas det vertikal-scroll när rutan blir för smal. Om du vill ha det så bör du läsa om wrapper-divs och centrering, det är det enkla sättet, men ger fullt inte stöd åt mobilenheter.

Det låter som du dock är på spåren skapa en responsiv webbplats ochdå bör inte hänga upp dig på sweclockers ser ut, utan läsa på om responsiv design och se om det löser dina problem. Lite klurigare få till rätt men mobilsurfandet ökar för fullt så är värt det enligt mig!

Senast redigerat
Visa signatur

Neon
Citera mig om du vill ha svar!

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Florrpan:

sätt width: 100%; på bilden.

Gå till inlägget

Eller max-width: 100%, så att den inte skalar upp större än vad den är...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Sätt width: 100% och sedan en max-width utefter vilken storlek bilden ska ha i bredd (ifall du inte vill ha en bild som täcker hela bredden på sidan)

EDIT: Missade att läsa halva din text. Kan du göra en skiss i paint som illustrerar vad som går fel? Eller formulera om din beskrivning?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Yxskaftet:

Eller max-width: 100%, så att den inte skalar upp större än vad den är...

Gå till inlägget

Givetvis, utgick bara från att han redan hade max-storleken på bilderna från början (om jag förstod hans text rätt).

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem
●

http://sv.tinypic.com/view.php?pic=2lj1bb7&s=8#.U5W00_l_t6A

http://sv.tinypic.com/view.php?pic=20zafr6&s=8#.U5W0-vl_t6A

html fil:

<html>
<head>
<title> hej </title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">

</head>
<body>

<img id="google" src="google.jpeg" width="25px"/>

</body>
</html>

Dold text

css fil:

body {background-image:url(Background.jpg)
}

#google {position:relative;
top:50px;
left:1000px;}

Dold text

kolla på bilderna så hoppas jag att ni förstår. jag har visserligen angett position i pixel format eller vad man ska säga vilket gör att bilderna hamnar utanför fönsret så att säga men om man har massa bilder på en sida och anger alla positioner i % då måste det ju bara bli en enda röra av alla bilder när man minimerar fönstret eller? :s

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Kan du något om CSS box-modellen?
Du måste rama in elementen, och förslagsvis använda float.

http://html.net/tutorials/css/
http://html.net/tutorials/css/lesson13.php

Mer än så vill jag faktiskt inte säga, kan tyvärr inte lära dig allt om CSS i ett inlägg. Lär dig grunderna så borde detta vara superenkelt för dig att lösa.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem
●

Vad jag uppfattat det som nu är att den lilla bilden ska följa fönstrets högra sida när du gör fönstret mindre?

HTML

<!doctype html>

<html>

<head>
  <title> hej </title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>

  <div id="wrapper">

        <img id="google" src="google.jpeg" width="25px"/>

  </div>

</body>

</html>

CSS

body {
  background: url('Background.jpg');
  width: 100%;
  height: 100%;
  padding: 0;
}

#wrapper{
  width: 100%;
  height: 100%;
  max-width: 1000px;
  position: relative;
}

#google {
  position: absolute;
  top: 50px;
  right: 0;
}

Bilden är fäst till wrapperns högra sida. Wrappern har en bredd på 100% men en maxbredd på 1000px, alltså när fönstrets bredd går under 1000px så kommer wrapperns bredd följa med enligt dess 100%-bredd.

Bilden följer alltså med när fönstrets storlek ändras under 1000px

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av brittaan:

Vad jag uppfattat det som nu är att den lilla bilden ska följa fönstrets högra sida när du gör fönstret mindre?

HTML

<!doctype html>

<html>

<head>
  <title> hej </title>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>

  <div id="wrapper">

        <img id="google" src="google.jpeg" width="25px"/>

  </div>

</body>

</html>

CSS

body {
  background: url('Background.jpg');
  width: 100%;
  height: 100%;
  padding: 0;
}

#wrapper{
  width: 100%;
  height: 100%;
  max-width: 1000px;
  position: relative;
}

#google {
  position: absolute;
  top: 50px;
  right: 0;
}

Bilden är fäst till wrapperns högra sida. Wrappern har en bredd på 100% men en maxbredd på 1000px, alltså när fönstrets bredd går under 1000px så kommer wrapperns bredd följa med enligt dess 100%-bredd.

Bilden följer alltså med när fönstrets storlek ändras under 1000px

Gå till inlägget

Löste det, tack!

ledsen för min dåliga beskrivning

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara