CSS & ioslides.100% высота ИЛИ 100% ширина в зависимости от изображений - PullRequest
Новая
       28

CSS & ioslides.100% высота ИЛИ 100% ширина в зависимости от изображений

0 голосов
/ 13 февраля 2019

Я создаю презентацию с использованием ioslides в RMarkdown.

У меня есть разные изображения, каждое со своими размерами: некоторые представляют больше высоты, чем ширины;другие наоборот и т. д.

Для этого я создал файл CSS, в котором я закодировал: 

img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
  horizontal: middle;
}

В то время как все изображения соответствуют 100% ширины, когда некоторые изэти изображения выше, часть изображений не видна.

Для примера, это оригинальное изображение:

enter image description here

Иэто результат включения его в ioslides: 

---

<img src="Figuras/anatomia.png">

enter image description here

Итак, как я могу это исправить?

Какя могу сделать, чтобы поместить его автоматически в середине?Правильно ли для этой цели то, как написано в вышеупомянутом коде?

==================

R Код уценки 

---
title: "TITLE"
subtitle: "SUBTITLE"
author: "Mario Modesto-Mata"
date: "11 February 2019"
output:
  ioslides_presentation:
    css: estilos.css
    incremental: yes
    smaller: yes
    transition: slower
---

# Histologie dentaire

---

<img src="Figuras/anatomia.png">

Вы можете хранить первое изображение где угодно и вызывать его в src=

estilos.css 

.gdbar img {
  width: 333px !important;
  height: 89px !important;
  margin: 8px 8px;
}

.gdbar {
  width: 400px !important;
  height: 105px !important;
}

slides > slide:not(.nobackground):before {
  width: 150px;
  height: 40px;
  background-size: 150px 40px;
}

/*Esto es para las propiedades de las imágenes*/
img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
  vertical-align: middle;
  horizontal: middle;
}

/* Esto es para la imagen de fondo de la PORTADA*/
slides > slide.title-slide{
  background-image:url("Figuras/portada.png");
  background-size: 100% 100%;
}
...