TLDR;
이 HTML / CSS를 사용하여 이미지를 추가하고 중앙에 배치하고 크기를 마크 다운 파일 내부의 화면 공간 너비의 60 %로 설정하십시오. 일반적으로 시작 값이 좋습니다.
<img src="https://i.stack.imgur.com/RJj4x.png"
style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
widthCSS 값을 원하는 백분율로 변경 하거나 마크 다운 기본 크기를 사용하도록 제거하십시오. 이미지가 화면보다 큰 경우 화면 너비의 100 %이거나 그렇지 않으면 실제 이미지 너비라고 생각합니다.
끝난!
또는 더 많은 정보를 계속 읽으십시오.
마크 다운 파일 내에서 완벽하게 작동하는 다양한 HTML 및 CSS 옵션은 다음과 같습니다.
1. 마크 다운 파일에서 모든 이미지를 가운데에 놓고 구성 (크기 조정)합니다.
이 파일을 복사하여 마크 다운 파일 상단에 붙여 넣어 파일의 모든 이미지를 중앙에 배치하고 크기를 조정하십시오 (그런 다음 일반 마크 다운 구문으로 원하는 이미지를 삽입하십시오).
<style>
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
</style>
또는 위와 동일한 코드이지만 자세한 내용을 설명하기 위해 자세한 HTML 및 CSS 주석이 있습니다.
<!-- (This is an HTML comment). Copy and paste this entire HTML `<style>...</style>` element (block)
to the top of your markdown file -->
<style>
/* (This is a CSS comment). The below `img` style sets the default CSS styling for all images
hereafter in this markdown file. */
img
{
/* Default display value is `inline-block`. Set it to `block` to prevent surrounding text from
wrapping around the image. Instead, `block` format will force the text to be above or below the
image, but never to the sides. */
display:block;
/* Common float options are `left`, `right`, and `none`. Set to `none` to override any previous
settings which might have been `left` or `right`. `left` causes the image to be to the left,
with text wrapped to the right of the image, and `right` causes the image to be to the right,
with text wrapped to its left, so long as `display:inline-block` is also used. */
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
/* You may also set the size of the image, in percent of width of the screen on which the image
is being viewed, for example. A good starting point is 60%. It will auto-scale and auto-size
the image no matter what screen or device it is being viewed on, maintaining proporptions and
not distorting it. */
width:60%;
/* You may optionally force a fixed size, or intentionally skew/distort an image by also
setting the height. Values for `width` and `height` are commonly set in either percent (%)
or pixels (px). Ex: `width:100%;` or `height:600px;`. */
/* height:400px; */
}
</style>
이제 markdown을 사용하여 이미지를 삽입할지 여부 :
또는 마크 다운 파일의 HTML :
<img src="https://i.stack.imgur.com/RJj4x.png">
... 위의 HTML 및 CSS의 주석에 설명 된대로 자동으로 화면 중심 너비의 60 %로 조정됩니다. (물론 60 % 크기도 실제로 쉽게 변경할 수 있으며 이미지별로 이미지를 만드는 간단한 방법을 제시합니다).
2. 한 번에 하나씩 이미지를 중앙에 배치하고 구성하십시오.
위의 <style>블록을 복사 하여 마크 다운 파일의 맨 위에 붙여 넣었는지 여부에 관계없이 위에서 설정 한 파일 범위 스타일 설정보다 우선하고 우선 적용되므로 작동합니다.
<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
다음과 같이 여러 줄로 형식을 지정할 수도 있으며 여전히 작동합니다.
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is an optional description of the image to help the blind and show up in case the
image won't load"
style="display:block; /* override the default display setting of `inline-block` */
float:none; /* override any prior settings of `left` or `right` */
/* set both the left and right margins to `auto` to center the image */
margin-left:auto;
margin-right:auto;
width:60%; /* optionally resize the image to a screen percentage width if you want too */
">
3. 위의 모든 것 외에도 CSS 스타일 클래스 를 만들어 개별 이미지를 스타일화할 수 있습니다.
이 모든 것을 마크 다운 파일의 맨 위에 추가하십시오.
<style>
/* By default, make all images center-aligned, and 60% of the width
of the screen in size */
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
</style>
이제 imgCSS 블록은 이미지가 중앙에 배치되고 화면 공간 너비의 60 %가 기본 크기로 설정되었지만 이미지 leftAlign및 rightAlignCSS 클래스를 사용하여 해당 설정을 이미지별로 재정 의 할 수 있습니다 .
예를 들어,이 이미지는 가운데 정렬되고 60 % 크기입니다 (위에서 설정 한 기본값).
<img src="https://i.stack.imgur.com/RJj4x.png">
그러나이 이미지는 위에서 방금 만든 CSS 클래스를 사용하여 텍스트 줄 바꿈과 함께 왼쪽 정렬 됩니다 leftAlign!
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">
다음과 같이 보일 수 있습니다 :
당신은 여전히 수 비아의 CSS 속성 중 하나를 오버라이드 (override) style속성 과 같이, 같은 폭으로하지만, :
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">
그리고 지금 당신은 이것을 얻을 것입니다 :
4. 3 개의 CSS 클래스를 작성하지만 img마크 다운 기본값을 변경하지 마십시오.
위에서 방금 보여준 기본 img property:value설정 을 수정하고 2 개의 클래스를 생성 한 또 다른 옵션 은 모든 기본 markdown img속성 을 그대로두고 다음과 같이 3 개의 사용자 정의 CSS 클래스를 만드는 것입니다.
<style>
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
width:60%;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
width:60%;
}
</style>
물론 다음과 같이 사용하십시오.
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">
위 width의 CSS style속성을 사용하여 수동으로 속성을 설정하는 방법에 주목하십시오 .하지만 더 복잡한 작업을 원할 경우 이와 같은 클래스를 추가하여 <style>...</style>위 의 블록 안에 추가 할 수도 있습니다 .
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
이제 같은 객체에 여러 클래스를 할당 할 수 있습니다. 단순히 쉼표가 아닌 공백으로 클래스 이름을 구분하십시오 . 설정이 충돌하는 경우 마지막 설정 이 적용되어 이전에 설정 한 설정보다 우선합니다. 동일한 CSS 클래스 또는 동일한 HTML style속성 내에서 동일한 CSS 속성을 여러 번 설정 한 경우에도 마찬가지 입니다.
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">
5. CSS 클래스에서 공통 설정 통합
마지막 요령은이 답변에서 배운 것입니다 : CSS를 사용하여 여러 이미지의 스타일을 다르게 지정할 수 있습니까? . 위에서 볼 수 있듯이 3 개의 CSS align클래스 모두 이미지 너비를 60 %로 설정합니다. 따라서 원하는 경우이 공통 설정을 한 번에 모두 설정할 수 있으며 나중에 각 클래스에 대한 특정 설정을 지정할 수 있습니다.
<style>
/* set common properties for multiple CSS classes all at once */
.centerAlign, .leftAlign, .rightAlign {
width:60%;
}
/* Now set the specific properties for each class individually */
/* Create a CSS class to style images to center-align */
.centerAlign
{
display:block;
float:none;
/* Set both the left and right margins to `auto` to cause the image to be centered. */
margin-left:auto;
margin-right:auto;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
/* custom CSS class to set a predefined "small" size for an image */
.small
{
width:20%;
/* set any other properties, as desired, inside this class too */
}
</style>
자세한 내용은:
1. Markdown의 HTML과 CSS에 대한 나의 생각
내가 아는 한, 마크 다운 문서에 작성되어 원하는 결과를 얻을 수있는 것은 "순수한 마크 다운"구문이 아니라 우리가 추구하는 모든 것입니다.
C 및 C ++에서 컴파일러는 어셈블리 코드로 컴파일 한 다음 어셈블리를 바이너리로 어셈블합니다. 그러나 때로는 어셈블리 만 제공 할 수있는 낮은 수준의 컨트롤이 필요하므로 C 또는 C ++ 소스 파일 안에 바로 인라인 어셈블리를 작성할 수 있습니다. 어셈블리는 "낮은 수준"언어이며 C 및 C ++ 내부에서 바로 작성할 수 있습니다.
마크 다운이 있습니다. 마크 다운은 HTML 및 CSS로 해석되는 고급 언어입니다. 그러나 추가 제어가 필요한 경우 마크 다운 파일 내에서 하위 수준의 HTML 및 CSS를 "인라인"할 수 있으며 여전히 올바르게 해석됩니다. 따라서 어떤 의미에서 HTML과 CSS 는 유효한 "마크 다운"구문입니다.
따라서 마크 다운에서 이미지를 중앙에 배치하려면 HTML 및 CSS를 사용하십시오.
2. 마크 다운의 표준 이미지 삽입 :
기본 "비하인드 스토리"HTML 및 CSS 형식으로 마크 다운에 기본 이미지를 추가하는 방법 :
이 마크 다운 :
이 출력을 생성합니다 :
이것은 내가 만든 총격 사건 hexacopter입니다 입니다.
선택적으로 여는 대괄호 안에 설명을 추가 할 수도 있습니다. 솔직히 나는 그것이 무엇인지 확실하지 않지만 아마도 HTML <img>요소 alt속성 으로 변환되어 이미지를로드 할 수없는 경우 표시되며 시각 장애인을 위해 화면 판독기로 읽을 수 있습니다. 따라서이 마크 다운 :
이 출력을 생성합니다.
3. 마크 다운에서 이미지의 중심을 맞추고 크기를 조정할 때 HTML / CSS에서 일어나는 일에 대한 자세한 내용 :
마크 다운에서 이미지를 중앙에 배치하려면 HTML과 CSS가 직접 제공 할 수있는 추가 컨트롤을 사용해야합니다. 다음과 같이 개별 이미지를 삽입하고 가운데에 맞출 수 있습니다.
<img src="https://i.stack.imgur.com/RJj4x.png"
alt="this is my hexacopter I built"
style="display:block;
float:none;
margin-left:auto;
margin-right:auto;
">
자세한 내용은 다음과 같습니다. 여기에 무슨 일이 일어나고 있는지 :
<img위 코드 의 일부는 HTML " 시작 태그 "이고 >끝에는 HTML " 끝 태그 "가 있습니다.- 시작 태그에서 종료 태그까지 모든 것이이 HTML
img" element "를 구성합니다.
- HTML
img "태그"/ "요소" 는 이미지를 HTML에 삽입하는 데 사용됩니다.
- 요소 내부의 각 지정은 HTML " 속성 "을 구성하고 있습니다.
- "스타일"속성은 받아 CSS 스타일을 : 여기에 따옴표 내부의 모든 것을, 그래서
style=""CSS의의입니다 property:value키 - 값 " 선언 ".
- 각 CSS "property : value 선언"은 세미콜론 (
;) 으로 구분 되지만이 "요소"의 각 HTML "속성"은 공백 (
- 키는 "속성"위의 HTML과 CSS 코드에서 가운데로 이미지를 얻을 수 있습니다 간단
src하고style 것.
- 그만큼
alt하나는 선택 사항입니다.
- 는 HTML 내부
styleCSS 스타일을 받아들이는 속성, 키 선언은 4 내가 보여줄 것을 : display:block, float:none, margin-left:auto, 및margin-right:auto .
- 이전에 속성을 설정 한 것이없는 경우
float 경우이 선언을 생략 할 수 있지만 만일의 경우를 대비하여 사용하는 것이 좋습니다.
- : 처음 배운 경우 어떻게 여기에 HTML과 CSS를 사용하여 이미지 중앙에 https://www.w3schools.com/howto/howto_css_image_center.asp을 .
- CSS는 C 스타일 주석 (
/* my comment */)을 사용합니다.
참고 문헌 :
- CSS 구문에 대한 자세한 내용은 https://www.w3schools.com/css/css_syntax.asp를 참조 하십시오.
- "HTML 태그 및 요소" 에 대한 내용은 여기를 참조하십시오 .
- 내 GitHub 마크 다운 추가 정보에서 https://github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation 에서 HTML 및 CSS 스타일링 연습을 많이했습니다.
- w3schools.com을 클릭하여 HTML과 CSS에 대해 알고있는 모든 것에 대해 배웠습니다. 특정 페이지는 다음과 같습니다.
- %%%%% https://www.w3schools.com/howto/howto_css_image_center.asp
- https://www.w3schools.com/css/css_float.asp
- https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2
- https://www.w3schools.com/css/css3_images.asp
- https://www.w3schools.com/tags/default.asp
- HTML 및 CSS 의견 : https://www.w3schools.com/css/css_comments.asp
- 내 소방 사격 헬리콥터 : https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html
