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

Umieszczenie obrazka na środku obramowania + ukośne linie

VPS Starter Arubacloud
0 głosów
904 wizyt
pytanie zadane 30 października 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)

Witam.

Mam obramowanie w kolorze czarnym, w wewnątrz tego obramowania tło jest zielone i na środku znajduje się obrazek. Kolor tła w wewnątrz tego obramowania podałem dla przykładu.

<img src="obrazki/foto1.png" width="100px" height="74px" style="border: 2px solid #000000; position: absolute; left: 0px; bottom: 0px" />

Obramowanie ma rozdzielczość 100x74. Rozdzielczość obrazka wynosi 64x48.

Zależy mi na dwóch rzeczach:

1. chciałbym, aby obrazek znajdował się na środku obramowania

2. chciałbym, aby w środku obramowania pojawiły się ukośne linie

Chodzi mi o coś takiego:

http://imageshack.com/a/img922/7483/sRcOoX.jpg

Jak widać, ukośne linie są białe.

Czy da się coś takiego zrobić?

2 odpowiedzi

+1 głos
odpowiedź 30 października 2017 przez lb478 Użytkownik (940 p.)

Linie możesz zrobić w osobnym pliku (ewentualnie całą ramkę).
W CSS border-image na odpowiedni DIV: https://developer.mozilla.org/pl/docs/Web/CSS/border-image
Jeśli nie interesuje cię ten efekt to po prostu poczytaj o obramowaniach (border) w CSS.

<div class="ramka"><img src="obrazek.png" /></div>

 

komentarz 30 października 2017 przez Krzysiek_34 Mądrala (6,050 p.)
edycja 30 października 2017 przez Krzysiek_34

Zrobiłem coś takiego dla testu:

<div id="content">
	<img src="obrazki/foto1.jpg" width="100px" height="143px" style="border: 2px solid #000000; position: absolute; left: 0px; top: 0px" />
	
	<div class="ramka">
		<img src="obrazki/foto2.png" style="border: 1px solid #000000" />
	</div>
</div>
#content
{
	background: url("obrazki/background/dark_wood.png");
	width: 760px;
	height: 360px;
	position: relative;
	overflow: hidden;
	margin-left: auto;
	margin-top: 25px;
	margin-right: auto;
}

.ramka
{
	border: 2px solid #000000;
	width: 100px;
	height: 74px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	background-color: #008000;
	display: flex;
	align-items: center;
	justify-content: center;
}

Punkt nr 1 jest już ogarnięty w 99%, ponieważ obrazek nie jest idealnie wyśrodkowany. Dotyczy to obrazka o nazwie foto2.png.

Zamiast:

display: flex;
align-items: center;
justify-content: center;

nie lepiej zastosować:

margin-left: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;

?

Jak uważacie?

komentarz 31 października 2017 przez lb478 Użytkownik (940 p.)

Zamiast:

margin-left: auto;
margin-top: auto;
margin-right: auto;
margin-bottom: auto;

Można: 
 

margin: auto;
/* LUB */
margin: 0 auto;

Ogólnie jest to jeden ze sposobów na centrowanie w pionie i poziomie. Ja jestem tego zdania że powinno się to wszystko pisać w miarę krótko i tak żeby zawsze dobrze i odpowiednio działało, więc tutaj sobie już sam odpowiedź na to co będzie lepsze.

komentarz 31 października 2017 przez Krzysiek_34 Mądrala (6,050 p.)

Jesteś w błędzie. Centrowanie w ogóle nie zadziałało przy zapisie:

margin: auto;

lub

margin: 0 auto;

Obrazek pojawił się na górze po lewej w tym obramowaniu.

komentarz 31 października 2017 przez lb478 Użytkownik (940 p.)

Aż sprawdziłem i faktycznie to mój błąd. Sprawdziłem ten mój zapis: https://codepen.io/shshaw/full/gEiDt
No cóż. Chyba sam muszę sobie ten CSS poprzypominać.

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

 

komentarz 31 października 2017 przez Krzysiek_34 Mądrala (6,050 p.)

Za bardzo przekombinowałeś. Nie lepiej trzymać sie tego? :

display: flex;
align-items: center;
justify-content: center;

 

0 głosów
odpowiedź 30 października 2017 przez shotokan Nałogowiec (39,660 p.)
Witaj,
Proponuję Twoje zadanie zrobić w programie graficznym, tzn. tworzysz obrazek z obramowaniem i tłem danego koloru, a na to dodajesz swój właściwy obrazek, centrujesz, dodajesz linie i już. Moim zdaniem szybciej i znacznie łatwiej niż zabawa z css (zwłaszcza z tymi skośnymi liniami).
komentarz 30 października 2017 przez Krzysiek_34 Mądrala (6,050 p.)
Nie chce tego robić w żadnym programie graficznym. Zabawa w CSS da lepszy efekt i więcej możliwości.
1
komentarz 30 października 2017 przez shotokan Nałogowiec (39,660 p.)
A więc jeśli chcesz umieścić obrazek na zielonym tle to musisz utworzyć <div> nadać mu odpowiednie rozmiary (width, height), kolor tła (background-color), obramowanie i w nim umieścić swój obrazek (oczywiście obrazek musi być mniejszy niż wielkość diva, tak aby kolor tła był widoczny). Obrazek jest elementem liniowym więc aby wyśrodkować użyj właściwości text-align lub zmienić na element blokowy i margin-left: auto, margnin-right: auto, albo skorzystać z flexboxa (to bym zalecał), czyli display:flex; oraz align-items: center; justify-content: center. Jak zrobić te linie - nie mam pojęcia, ale jeszcze się zastanowię w wolnym czasie...

Podobne pytania

+1 głos
1 odpowiedź 222 wizyt
pytanie zadane 6 sierpnia 2021 w JavaScript przez stellatus Obywatel (1,390 p.)
0 głosów
1 odpowiedź 230 wizyt
pytanie zadane 16 września 2018 w HTML i CSS przez kevin Mądrala (5,010 p.)
0 głosów
0 odpowiedzi 485 wizyt
pytanie zadane 17 listopada 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)

92,454 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...