Umieszczenie obrazka na środku obramowania + ukośne linie

Question

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ć?

Answer 1

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>

 

Comments

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?

---

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.

---

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.

---

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;
}

 

---

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

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

 

Answer 2

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).

Comments

Nie chce tego robić w żadnym programie graficznym. Zabawa w CSS da lepszy efekt i więcej możliwości.

---

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...