• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zmniejszenie rozmiaru obrazka - CSS lub HTML

Object Storage Arubacloud
+1 głos
51,314 wizyt
pytanie zadane 8 lutego 2017 w HTML i CSS przez husarbilu Początkujący (370 p.)

Dzieńdobry!

Wczoraj wpadłem na pomysł stworzenia strony, aby nie zapominać tych informacji które się nauczyłem.

Pomysł zaczerpnąłem z stron typu: csgoatse.com, lecz pomijam kod który jest napisany najprawdopodobniej w C++ lub Javie, ponieważ do tych języków jeszcze mi daleko ;D

Ale nie wiem w jaki sposób zrobić jedną kluczową rzecz - zmniejszyć rozmiar obrazka, próbowałem wieloma sposobami, siedzę nad tym od około dwóch godzin i nadal robię ten sam błąd (pewnie banalnie łatwy) jednak ja go nie widzę.

Załączam zdjęcie jak to wygląda w przeglądarce: bit.ly/2k2cMvN

oraz jak chcę aby to wyglądało na tym etapie: bit.ly/2k29FUB

To jest kod:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<link rel="icon" href="C:/Users/Przemek/Desktop/HTML - project csgodouble/ikonka.png" />
<font face="Mainframe BB">
<font size="4">
<font color="black">
</font>
<meta name="Keywords" content="csgo, ruletka, counter strike, csgodouble, cs ruletka, csgo ruletka, roulette" />
      <meta charset="utf-8" />
      <title>csgoWON</title>
<style>
#pojemnik
{
  margin: auto;
  width: 1000px;
  height: 562.5px;
  border: 1px;
  border-color: black;
  border-style: solid;
}
#gornypasek
{
  
}
#logostrony
{

  float: left;
  }
#buttonplay
{

  float: left;
}
#buttonkonto
{

  float: left;
}
#zaloguj
{

  float: left;
}
#wylosowane
{
  border: 1px;
  border-color: black;
  border-style: solid;
  margin: auto;
  width: 800px;
  height: 62.5px;
  clear: both;
}
</style>     
</head>
<body>
<div id="pojemnik">

<div id="gornypasek">

<div style="width: 160px" id="logostrony">
<a href="www.adres_strony.costam.pl">
<img src="logo.png" /></a>
</div>

<div style="width: 160px" id="buttonplay">
<a href="ruletka.html">
<img src="buttonplay.png" />
</a></div>

<div style="width: 160px" id="buttonkonto">
<a href="konto.html">
<img src="buttonkonto.png" />
</a></div>

<div style="width: 160px" id="zaloguj">
<a href="https://www.steamcommunity.com">
<img src="zaloguj.png" />
</a></div>
</div>
<div id="wylosowane">



</div>
<div id="chat">



</div>
<div id="menu">



</div>
<div id="stopka">



</div>
</div>
</body>
</html>

 

4 odpowiedzi

0 głosów
odpowiedź 8 lutego 2017 przez seba Dyskutant (8,900 p.)
wybrane 8 lutego 2017 przez husarbilu
 
Najlepsza
<img src="obrazek.png" width="150" height="150"/> takie coś. Lub w programie graficznym go przeskalowac na rozmiary takie jakie chcesz.
komentarz 8 lutego 2017 przez husarbilu Początkujący (370 p.)
Skalować w programie graficznym właśnie nie chciałem, bo zauważyłem że jak skaluje w html to jest mniej rozpikselowany. Pomogłeś, dzięki(a ja tyle nad tym siedziałem i na to nie wpadłem :D)
komentarz 8 lutego 2017 przez seba Dyskutant (8,900 p.)
No to liczę na naj :D
0 głosów
odpowiedź 8 lutego 2017 przez rusk Obywatel (1,640 p.)

Jeśli chodzi Ci o określenie wymiarów obrazka to dodaj do elementu IMG atrybuty width i height, tak:

 <img src="smiley.gif" alt="Smiley face" height="42" width="42"> 

Ewentulanie width="100%", height="100%" żeby wpasować go w kontener.

komentarz 8 lutego 2017 przez husarbilu Początkujący (370 p.)
Właśnie na to nie wpadłem, dzięki za szybką odpowiedź!
0 głosów
odpowiedź 8 lutego 2017 przez Kamil Zduński Nowicjusz (200 p.)
Zmniejszasz przez nadanie odpowiednich class. Nie powinno się podawania rozmiarów w kodzie html. Możesz to zrobić tak jak poniżej (kod css możesz wkleić do pliku ze stalami):

Plik index.html
<head>

<style>
.logo{

width: ....... px;
height: ......px;

}

</style>

</head>
<body>

<img src="jakisobraz.png" class="logo">

</body>
komentarz 8 lutego 2017 przez husarbilu Początkujący (370 p.)
A jaka jest różnica po między #logo a .logo?
komentarz 8 lutego 2017 przez dominik36 Początkujący (480 p.)
Różnica znaczna:

#logo dotyczy elementu o id logo np, <div id="logo">, wtedy stosujemy w CSS-ie właśnie #nazwa;

.logo dotyczy elementu o klasie np, <div class="logo"> ---> .nazwa :)

Powodzenia.
0 głosów
odpowiedź 8 lutego 2017 przez ck Obywatel (1,780 p.)
<img src="logo.png" width="100px" height="100px" />

Otrzymasz obrazek o wielkości 100x100 px.
Jeszcze wywal tego css z pliku html, stwórz osobny plik style.css i dołącz go 
 

<link rel="stylesheet" href="style.css" type="text/css" />

 

komentarz 8 lutego 2017 przez husarbilu Początkujący (370 p.)
Skorzystałem już wcześniej ale utworzę osobny plik css, dzięki! :)

Podobne pytania

0 głosów
3 odpowiedzi 1,705 wizyt
pytanie zadane 11 lutego 2020 w HTML i CSS przez Loveuso Nowicjusz (190 p.)
0 głosów
2 odpowiedzi 1,307 wizyt
pytanie zadane 11 kwietnia 2017 w HTML i CSS przez seba Dyskutant (8,900 p.)
0 głosów
2 odpowiedzi 3,226 wizyt
pytanie zadane 1 stycznia 2018 w HTML i CSS przez ThePatrykOOO Dyskutant (8,400 p.)

92,761 zapytań

141,685 odpowiedzi

320,482 komentarzy

62,105 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...