Comments (13)
Тогда придётся разбирать картинки, заодно это решает массовую проблему с неверным Exif-ом картинок с мобил. В браузерной js-вселенной я использую для этого https://github.com/blueimp/JavaScript-Load-Image, наверное на Кложе что-то такое же есть.
from grumpy.
Имхо высоту можно вообще не задавать. Или я неправильно проблему понимаю?
from grumpy.
наоборот, чтобы при загрузке не прыгало, надо задавать
from grumpy.
Чтобы при загрузке адаптивных картинок не прыгало, задавать конкретную высоту вроде как бессмысленно, надо задавать пропорции? Или я чего-то недопонимаю?
from grumpy.
высота известна, надо как-то так с CSS извратиться теперь, чтобы размер/пропорции указать
from grumpy.
может они сжимаются от того что ширина явно указывается?
from grumpy.
ну убрать width
вообще или поставить width: auto
вроде бы не помогает
from grumpy.
Если я правильно понял то тебе интересно свойство object-fit
img {
object-fit: cover;
}
from grumpy.
непонятно что надо-то :)
если просто бесит что непропорционально картинки сжимаются то отсавь в .post_img { max-width: 100%; } и не добавляй к img width
если надо fill/fit/strech/tile то вон специальное свойство недавно завезли
from grumpy.
Вот что я хочу: ширина картинки динамическая от viewport, с max-width 550px; Высота пропорциональна ширине и известна до загрузки картинки (чтобы контент не прыгал). Похоже что придется старый добрый https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css юзать
object-fit это не то. Картинка-то фиксится, а поля остаются
Убрать width не помогает (потому что height абсолютный)
from grumpy.
в so для div'a описано. для картинок оно само считает же. делай быстрее, мы посмотрим :)
from grumpy.
Я наконец-то понял, что ты хочешь ) Проще всего это сделать div-ом, у которого padding-top (или bottom) задан в процентах, а проценты – aspect ratio картинки. То-есть если картинка 1000х600, padding-top:60%. А потом этому div задать бэкграунд из картинки.
from grumpy.
"семь красных линий"
from grumpy.
Related Issues (20)
- add comments link HOT 2
- Do not log java.io.IOException: Connection reset by peer
- lowercase email when logging in
- Remove video overlay when playing video HOT 1
- Use white background when converting transparent png to jpg
- allow telegram handles for login HOT 1
- Converting video is too expensive HOT 1
- Set up regular backups
- Automatic post translation to Twitter HOT 1
- NullPointerException: instant HOT 3
- Consider switching to pagination HOT 2
- Feedly does not play Atom video HOT 1
- Dark theme
- Add empty audio track when posting video to telegram HOT 1
- Fullscreen video
- Consider replacing imagemagick w/ imageflow
- Links lose their query part
- Dates after Dec 28, 2020 are displayed as 2021
- Investigate horizontal scroll on mobile
- Video shows up before and after the text in Feedly HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from grumpy.