Zmniejszenie rozmiaru obrazka - CSS lub HTML

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

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

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ź!

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.

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,656 wizyt

Zmiana rozmiaru obrazka w css

pytanie zadane 11 lutego 2020 w HTML i CSS przez Loveuso Nowicjusz (190 p.)

0 głosów

2 odpowiedzi 1,255 wizyt

Wstawianie obrazka - HTML,CSS

pytanie zadane 11 kwietnia 2017 w HTML i CSS przez seba Dyskutant (8,900 p.)

0 głosów

2 odpowiedzi 3,201 wizyt

Dopasowanie rozmiaru obrazka bez względu na rozmiar urządzenia

pytanie zadane 1 stycznia 2018 w HTML i CSS przez ThePatrykOOO Dyskutant (8,400 p.)

Zmniejszenie rozmiaru obrazka - CSS lub HTML

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

4 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci